Question

在your fiddle从jQuery动画切换到CSS动画以使我的移动菜单动画更流畅之后，我仍然发现在智能手机上打开的移动菜单的动画是生涩的，我不知道知道如何改进它。

JS：

.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;
}

CSS：

<body>
<div class='wrap'>
  <div class='header'>
    <div class='mobile_menu'>
      ...
    </div>
  </div>
</div>
</body>

HTML：

$( '.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' ); 
});

编辑：基于@GaijinJim的新代码的答案如下。

JS：

@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;
}

CSS：

{{1}}

Answer 1

由于您没有使用转换，这听起来更像是性能问题。

Chris Coyier在A Tale of Animation Performance中提到过

使用translate（）移动已成为常见的通用建议   元素比使用top / right / bottom / left具有更好的性能。

[...]保罗在 Chrome团队的另一位保罗与Paul Lewis谈过，他同意了   “使用translate（）进行设计运动更聪明。”但是去了   可以说，这比帧率更多。同   translate（），你得到的子像素动画是一种模糊   通常导致动画更平滑的像素之间

您还可以阅读这篇关于All you need to know about CSS Transitions的精彩文章：

硬件加速
  转换某些属性，例如left   和margin会导致浏览器每帧重新计算样式。   这是相当昂贵的，可能导致不必要的重新涂漆，   特别是如果屏幕上有很多元素。这是   特别值得注意的是功能较弱的设备，如手机。

此解决方案是使用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将动画留在开头

为什么我的简单CSS过渡动画在智能手机上生涩？

1 个答案: