0

DIVs私は、ある CSS クラスから別の CSS クラスへ (jQueryaddClassとを使用して)、画像の背景を持つ複数のトランジションを実行する Web サイトを持っています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

これで、モバイル Safari で1 つをアニメーション化するDIVと、すべてがスムーズに機能します。ただし、複数の要素を同時にアニメーション化すると、Mobile Safariは恐ろしく遅くなります。明らかに、これは Chrome などの通常のブラウザで問題なく動作します。

これを解決するために私が試した方法:

  • translate3dおよびscale3dCSS プロパティの使用
  • jQueryの使用animate
  • jQueryUI の使用switchClass
  • 背景画像IMGの代わりにタグを使用するDIV

どんな助けでも大歓迎です、

ありがとう

4

1 に答える 1

0

OK、この問題の原因を突き止めることができました:fadeクラスはメイン DIV 内の多くの内部 DIV に適用され、このサイズ変更トランジションを含まない特定のトランジションに対してのみその効果が必要でした (このため、私は別の CSS クラスがあります)。

そのため、トランジションを適用する直前に を呼び出しremoveClass('fade')、トランジションを終了するときにもう一度追加します。

于 2012-08-07T12:03:47.983 に答える