使用CSS动画运行缓慢

http://benliger.webatu.com/

进出口创造一个移动导航菜单，并决定使用CSS在移动视图动画的下拉作用的过程。这里我担心的是菜单运行时非常“笨重”（动画在页面上弹出菜单而不是平滑过渡）。它在桌面浏览器上调整大小时看起来很好，但我期望移动设备上的动画更流畅。移动设备即时通讯是一个宏达电一个迷你如此相当新的手机。它的动画方式就是通过添加和删除具有不同边距的类。谁能告诉我为什么它的运行如此糟糕？

代码：

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

感谢，本

来源

2014-10-02 red house 87

发布您的代码？ – 2014-10-02 13:42:49

是否有一个原因，你是动画边缘顶而不是使用translate3d？你可以利用硬件加速和后面的 – imjared 2014-10-02 13:44:43

代码发布。没有理由Imjared你能不能建议代码应该看翻译3D？我可以尽快测试并检查更好的结果，我只是假设过渡会产生同样的效果 – 2014-10-02 13:50:22

边距不是被加速移动的属性。你可以通过使用transform来做安全的效果：翻译是加速的。

编辑：例：

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

来源

2014-10-02 14:26:56 scooterlord

这已经修复了性能问题（一旦我添加！移动headerdownclass的结尾），但现在当你第一次点击手机上的按钮时，菜单变得向右移动，然后每次点击按钮时左右保持几个像素左右的变化。@scooterlord – 2014-10-02 14:41:46

它确实这在移动设备上，但不是在桌面上调整大小的浏览器.. – 2014-10-02 14:42:47

答案关注性能问题，而不是你的实际设计。你应该避免的是，手机的margin-top不会加速，你应该找到另一种方法 - 答案只是一个建议。 – scooterlord 2014-10-02 14:49:55

使用CSS动画运行缓慢

回答

相关问题