为固定位置侧边栏添加动画效果

Question

我正在尝试让我的固定侧边栏滑入或只是一般的动画，但我似乎不知道该怎么做。我尝试只添加一些过渡和常规动画，但它们似乎不起作用。如果可能的话，我需要保持修复。任何帮助，不胜感激。

$('.open-menu').click(function() {
$(".sidebar").toggleClass('open')
$("body").toggleClass('no-scroll')
});

.wrap {
margin-bottom: 54px;
}
.sidebar {
background: black;
width: 280px;
height: calc(100% - 50px);
position: fixed;
-webkit-transform: translate3d(-100%, 0px, 0px);
transform: translate3d(-100%, 0px, 0px);
display: none;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
-webkit-animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0ms both;
animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0ms both;
overflow-y: auto;
z-index: 10;
}
.open {
display: block !important;
-webkit-transform: translate3d(0px, 0px, 0px);
transform: translate3d(0px, 0px, 0px);
-webkit-animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0ms both;
animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0ms both;
}
.no-scroll {
position: fixed;
}
.content {
flex-basis: 0;
-ms-flex-positive: 1;
flex-grow: 1;
/* max-width: 100%; */
position: relative;
/* width: 100%; */
min-height: 1px;
}
.drawer-btn-container {
display: block;
width: 100%;
position: fixed;
bottom: 0;
left: 0;
z-index: 100;
}
.drawer-btn {
width: 100%;
display: block;
text-align: center;
padding: 1rem;
background: green;
color: white;
}
/*Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {}
/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {}
/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {}
/*Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
.sidebar {
display: block;
-webkit-transform: translate3d(0px, 0px, 0px);
transform: translate3d(0px, 0px, 0px);
position: relative;
overflow: hidden;
height: 100%;
-ms-flex-preferred-size: 0;
/* flex-basis: 0; */
-ms-flex-positive: 1;
/* flex-grow: 1; */
/* max-width: 100%; */
position: relative;
/* width: 100%; */
min-height: 1px;
width: 280px;
}
.wrap {
margin-bottom: 0;
}
.drawer-btn-container {
display: none;
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid p-0 wrap">
<div class="row no-gutters">
<div class="col-auto scale-up-center">
<div class="sidebar">
Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>bottom<br></div>
</div>
<div class="col">
<div class="content">Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>bottom<br></div>
</div>
</div>
</div>
<div class="drawer-btn-container">
<div class="row">
<div class="col">
<a href="#" class="drawer-btn open-menu">Main Menu</a>
</div>
</div>
</div>

http://jsfiddle.net/4xt9e2ro/

Answer 1

表单.sidebar删除display: none;，将.open更改为.sideba.open并删除display:block !important;

但说实话，你的css有点混乱。您使用动画，但没有声明键。请阅读以下内容： https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations

干杯