Question

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

http://benliger.webatu.com/

我正在创建移动导航菜单，并决定在移动视图中使用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);
}

Css动画运行缓慢

1 个答案: