Mobile Safari和CSS的多元素转换滞后

Question

我有一个网站，我在其中执行多个具有图像背景的DIVs的转换，从一个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 Safari上为一个DIV设置动画时，一切都能顺利进行。然而，当同时为多个元素设置动画时，Mobile Safari会严重滞后。显然，这在Chrome等常规浏览器上运行得很好。

我尝试过的解决方法：

• 使用translate3d和scale3d CSS属性
• 使用jQuery的animate
• 使用jQueryUI的switchClass
• 使用IMG标签代替背景图像的DIV

任何帮助都将不胜感激，

感谢

Answer 1

好吧，我已经找到了导致这个问题的原因：fade类被应用于主DIV中的许多内部DIV，我只需要对某些转换产生这种效果，这些转换不包括这种调整大小的转换（为此，我有另一个CSS类）。

因此，在应用转换之前，我调用removeClass('fade')，在结束转换时，我再次添加它。