Анимация при смене классов сетки bootstrap в jQuery
у меня такая задача. Я хочу сделать боковое выдвигающиеся меню, сделал с помощью toggleClass, замену классов col, но у меня совершенно не получается сделать плавную анимацию.
$('.menu-btn').on('click', function(e) {
e.preventDefault();
$('.menu').toggleClass('menu_off');
$('.content').toggleClass('content_active, col-12');
}).menu {
background: #fff;
height: 1000px;
display: block;
}
.menu_off {
display: none;
}
.content {
background: blue;
height: 1000px;
width: 100%;
}
.menu-btn {
background: black;
width: 50px;
height: 50px;
cursor: pointer;
display: block;
border-radius: 25px;
}
.menu-btn:hover {
background: red;
width: 50px;
height: 50px;
cursor: pointer;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-2 menu">
Менюшка и баннеры
</div>
<div class="col-10 content">
<div class="menu-btn"></div>
Контент
</div>
</div>