0

我有一个网站，我在其中执行多个DIVs图像背景的转换，从一个 CSS 类到另一个（使用 jQueryaddClass和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和scale3dCSS 属性
  • 使用 jQuery 的animate
  • 使用 jQueryUI 的switchClass
  • 使用IMG标签而不是DIV背景图像

任何帮助都感激不尽，

谢谢

4

1 回答 1

0

好的，我已经设法找出导致此问题的原因：fade该类应用于主 DIV 中的许多内部 DIV，并且我只需要某些过渡效果，其中不包括此调整大小过渡（为此，我有另一个 CSS 类）。

所以，在应用过渡之前，我调用removeClass('fade')，当结束过渡时，我再次添加它。

于 2012-08-07T12:03:47.983 回答