移动Safari和CSS多元素转换滞后
移动Safari和CSS多元素转换滞后
提问于 2012-08-05 12:02:15
我有一个网站，其中我执行多个具有图像背景的DIVs的转换，从一个CSS类到另一个CSS类(使用jQuery的addClass和removeClass)。
.class1 {
height: 30px;
width: 50px;
top: 30px;
left: 10px;
}
.class2 {
height: 50px;
width: 70px;
top: 50px;
left: 80px;
}
.fade {
-webkit-transition: opacity 0.6s linear, -webkit-transform 5s linear, width 5s linear, height 5s linear;
-moz-transition: opacity 0.6s linear, background-size 5s linear;
-ms-transition: opacity 0.6s linear, background-size 5s linear;
-o-transition: opacity 0.6s linear, background-size 5s linear;
transition: opacity 0.6s linear, background-size 5s linear;
-webkit-backface-visibility: hidden;
} 所有DIVs都用fade类初始化(加载页面时)。
现在，当在Mobile上动画化一个DIV时，一切都很顺利。然而，当动画的多个元素simultaneously，移动Safari严重滞后。显然，这在像Chrome这样的普通浏览器上运行得很好。
方法我试图解决这个问题：
- 使用
translate3d和scale3dCSS属性 - 使用jQuery的
animate - 使用jQueryUI的
switchClass - 用
IMG标记代替背景图像的DIV
任何帮助都会很感激，
谢谢
回答 1
Stack Overflow用户
回答已采纳
发布于 2012-08-07 12:03:47
好的，我已经找到了导致这个问题的原因：fade类应用于主DIVs中的许多内部DIVs，并且我只需要在某些转换中使用这种效果，而这些转换不包括这个调整大小的转换(为此，我有另一个CSS类)。
因此，在应用转换之前，我调用removeClass('fade')，在结束转换时，再次添加它。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11816244
复制相关文章
相似问题
腾讯云开发者
