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
およびscale3d
CSS プロパティの使用- jQueryの使用
animate
- jQueryUI の使用
switchClass
- 背景画像
IMG
の代わりにタグを使用するDIV
どんな助けでも大歓迎です、
ありがとう