CSS动画运行缓慢

Question

我在这里有一个投资组合网站:

http://benliger.webatu.com/

我正在创建移动导航菜单，并决定在移动 View 中使用 CSS 来为下拉效果设置动画。我在这里担心的是，当您将菜单放下时，菜单运行起来非常“笨拙”(动画使菜单在页面上抖动而不是平滑过渡)。在桌面浏览器上调整大小时看起来不错，但我期待移动设备上的动画更流畅。我用于移动设备的设备是 HTC one mini 非常新的手机。它的动画方式只是通过添加和删除具有不同 margin-top 的类。谁能告诉我为什么它运行如此糟糕？

代码:

$('.mobile-menu-icon').click(function () {

$(".header-options").toggleClass("mobileheaderdown");
});


.header-options {
color:white;
transition: all 0.5s ease-in-out;
-moz-transition:all 0.5s ease-in-out;
-o-transition:all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
 margin-left:0px;
list-style-type:none;
font-size:18px;
margin-top: -203px;
background-color: rgba(0, 0, 0, 0.91);
width:100%;
text-align: center;
float: right;
}

.mobileheaderdown{
margin-top:2px !important;
}

谢谢，本

Answer 1

margin-top 不是为手机加速的属性。您可以使用加速的 transform:translate 来实现安全效果。

编辑:示例:

.header-top {
  -webkit-transform:translate(0,-203px);
  -ms-transform:translate(0,-203px);
  transform:translate(0,-203px);
}
.header-top.mobileheaderdown {
  -webkit-transform:translate(0,0);
  -ms-transform:translate(0,0);
  transform:translate(0,0);
}