在被建议从jQuery动画切换到CSS动画以使我的移动菜单动画更流畅后，我仍然发现智能手机上打开移动菜单的动画很生涩，我不知道该怎么做才能改进它。
.JS：
$( '.header__menu_icon' ).click(function() {
var allClasses = 'right_0 right_280 right_minus_280';
$( '.mobile_menu, .wrap' ).removeClass( allClasses );
if ( $('.wrap' ).css( 'right' ) == '0px' ) {
$( '.wrap' ).addClass( 'right_280' );
}
else {
$( '.wrap' ).addClass( 'right_0' );
}
});
.CSS：
.mobile_menu {
width: 280px;
position: absolute;
right: -280px;
}
.right_0 {
right: 0 !important;
}
.right_280 {
right: 280px !important;
}
.right_minus_280 {
right: -280px !important;
}
body,
.wrap,
.mobile_menu {
transition: all 0.2s ease-in-out;
}
.HTML：
<body>
<div class='wrap'>
<div class='header'>
<div class='mobile_menu'>
...
</div>
</div>
</div>
</body>
编辑：基于下面@GaijinJim答案的新代码。
.JS：
$( '.header__menu_icon' ).toggle( function() {
$( '.wrap' ).removeClass( 'mobile_menu_opening mobile_menu_closing' );
$( '.wrap' ).addClass( 'mobile_menu_opening' );
}, function() {
$( '.wrap' ).removeClass( 'mobile_menu_opening mobile_menu_closing' );
$( '.wrap' ).addClass( 'mobile_menu_closing' );
});
.CSS：
@keyframes mobile_menu_opening {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(-280px);
}
}
@keyframes mobile_menu_closing {
0% {
transform: translateX(-280px);
}
100% {
transform: translateX(0px);
}
}
.mobile_menu_opening {
animation-name: mobile_menu_opening;
animation-duration: 2s;
}
.mobile_menu_closing {
animation-name: mobile_menu_closing;
animation-duration: 1s;
}
.wrap {
position: relative;
}
这听起来更像是一个性能问题，因为你没有使用转换。
在克里斯·科耶尔的《动画表演的故事》中提到过
使用 translate（） 移动已成为常见的通用建议 元素比使用上/右/下/左具有更好的性能。
[...]Paul与Chrome团队的另一位Paul交谈，Paul Lewis同意 它"使用translate（）进行设计-y运动更聪明"。但是去了 可以说，这不仅仅是帧速率。跟 translate（），你会得到亚像素动画，这是一种模糊 通常会导致更平滑动画的像素之间
您还可以阅读这篇关于您需要了解的有关 CSS 过渡的所有内容的精彩文章：
硬件加速
转换某些属性，例如 left 和边距导致浏览器每帧重新计算样式。 这是相当昂贵的，并且可能导致不必要的重新粉刷， 特别是如果你在屏幕上有很多元素。这是 在功能较弱的设备（例如手机）中尤其明显。此解决方案是使用 CSS 将渲染卸载到 GPU 转换。简单来说，这会将元素转换为图像 在过渡期间，避免任何样式重新计算，这极大地 提高性能。
因此，在您的情况下，我会将您的整个类更改为一个简单的动画，例如：
@keyframes buttonInOutAnimation{
0%{transform:translateX(-280px);}
50%{transform:translateX(280px);}
100%{transform:translateX(-280px);}
}
然后，您可以将此动画分配给按钮类，如下所示：
.YourClassToAnimate{
animation: buttonInOutAnimation 1s ease-in-out 0s 1;
}
然后你可以像你已经做的那样用jquery分配这个类。
最后一件事：在这种情况下，您需要添加填充模式以在动画结束时冻结动画状态。
-webkit-animation-fill-mode: forwards;
forwards使动画保持最后一帧的状态。
backwards在开始时离开动画