我正在为响应式导航菜单使用 CSS translate 3D and scale 3D。在触摸设备上,更具体地说,iPhone,它导致同一页面上的单独 jQuery 动画执行缓慢,几乎就像它在动画时频闪一样。谁能阐明这个问题?
如果有任何相关性,我正在使用 SASS:
nav {
left: 0;
@include transform( translate3d(-100%, 0, 0) );
@include backface-visibility;
.nav__block {
@include transition( -webkit-transform 500ms ease );
@include transition-delay( ease, 0s );
@include transform( translate3d(70%, 0, 0) scale3d(0.9, 0.9, 0.9) );
@include transform-origin( 50% 0% );
}
}
}
下面是运行缓慢的 jQuery 片段:
this.container.filter(':visible').animate({
'left': '-=' + self.childWidth + 'px'
}, 300).clearQueue();
提前感谢您抽出时间!
最佳答案
jQuery 的 animate 函数很可能是这种情况的罪魁祸首,因为它没有利用硬件加速,而硬件加速是 iPhone 等移动设备上流畅性能所必需的。
您可以使用 jQuery Animate Enhanced插件,它覆盖了 jQuery animate 函数并改用 css3 转换。这是一个演示:
JS Fiddle Demo
$(".container").animate({
'left': '-=' + 400 + 'px',
'useTranslate3d': true
}, 500);
我用 iPad 进行了测试。事实上,如果您删除对 jQuery Animate Enhanced 库的引用,您将看到移动设备上的性能下降。
关于jquery - 3D 转换 (translate3D) 似乎导致移动设备上的 jQuery 动画缓慢,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16335295/