Css 设置固定位置边栏的动画

我试图让我的固定边栏滑入或只是一般动画，但我似乎不知道如何做到这一点。我尝试过添加一些过渡和常规动画，但它们似乎不起作用。如果可能的话，我需要把它修好。感谢您的帮助

$（'.打开菜单'）。单击（函数（）{
$（“.sidebar”）.toggleClass（'open'）
$（“body”）.toggleClass（'no-scroll'））
});
.wrap{
边缘底部：54px；
}
.侧边栏{
背景：黑色；
宽度：280px；
高度：计算（100%-50px）；
位置：固定；
-webkit转换：translate3d（-100%，0px，0px）；
转换：translate3d（-100%，0px，0px）；
显示：无；
-webkit过渡：所有.3s易于输入输出；
-moz转换：所有.3轻松输入输出；
-o型转换：所有.3s易于输入输出；
过渡：所有.3s易于输入输出；
-webkit动画：放大中心0.4s立方贝塞尔（0.390,0.575,0.565,1.000）0毫秒；
动画：放大中心0.4s立方贝塞尔（0.390,0.575,0.565,1.000）0毫秒；
溢出y：自动；
z指数：10；
}
.打开{
显示：块！重要；
-webkit转换：translate3d（0px，0px，0px）；
转换：translate3d（0px，0px，0px）；
-webkit动画：放大中心0.4s立方贝塞尔（0.390,0.575,0.565,1.000）0毫秒；
动画：放大中心0.4s立方贝塞尔（0.390,0.575,0.565,1.000）0毫秒；
}
.没有卷轴{
位置：固定；
}
.内容{
弹性基准：0；
-ms-flex阳性1例；
柔性生长：1；
/*最大宽度：100%*/
位置：相对位置；
/*宽度：100%*/
最小高度：1px；
}
.抽屉式btn容器{
显示：块；
宽度：100%；
位置：固定；
底部：0；
左：0；
z指数：100；
}
.抽屉btn{
宽度：100%；
显示：块；
文本对齐：居中；
填充：1rem；
背景：绿色；
颜色：白色；
}
/*小型设备（景观手机、576px及以上）*/
@介质（最小宽度：576px）{}
/*中型设备（平板电脑、768px及以上）*/
@介质（最小宽度：768px）{}
/*大型设备（台式机、992px及以上）*/
@介质（最小宽度：992px）{}
/*超大设备（大型台式机，1200像素及以上）*/
@介质（最小宽度：1200px）{
.侧边栏{
显示：块；
-webkit转换：translate3d（0px，0px，0px）；
转换：translate3d（0px，0px，0px）；
位置：相对位置；
溢出：隐藏；
身高：100%；
-ms flex首选尺寸：0；
/*弹性基准：0*/
-ms-flex阳性1例；
/*柔性生长：1*/
/*最大宽度：100%*/
位置：相对位置；
/*宽度：100%*/
最小高度：1px；
宽度：280px；
}
.包裹{
页边距底部：0；
}
.抽屉式btn容器{
显示：无；
}
}

侧栏
侧栏
侧栏
侧栏
侧栏
侧栏
侧栏
侧栏
侧栏
侧栏
侧栏
侧栏
侧栏
侧栏
侧栏
侧栏
侧栏
侧栏
侧栏
侧栏
侧栏
侧栏
侧栏
侧栏
侧栏

侧栏
侧栏
侧栏
侧栏
侧栏
侧栏
侧栏
侧栏
侧栏
侧栏
侧栏
侧栏
侧栏
侧栏
侧栏
侧栏
侧栏
侧栏
侧栏
侧栏
侧栏
侧栏
侧栏
侧栏
底部

内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容nt
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content>内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
底部

表单
。侧栏
删除
显示：无
，将
.open
更改为
.sideba。打开
并删除
显示：阻塞！重要的

但是说实话，你的css有点乱。您正在使用动画，但未声明keyfrems。请阅读：

干杯
这将不再使我的布局具有响应性。请检查这个：或者可能我没有得到它。