CSSアニメーションを使用したiOのパフォーマンスに関する問題

Question

bottom属性でCSSトランジションを使用してボタンをクリックしたときに移動するdivを含むhtmlページがあります。 （底値の変更はjQueryによって行われます）これはすべてのブラウザ（iPadのiOSを含む）で問題なく動作しています。今私は同じことをしなければならない第二のページを開発しています。私はすべてのCSSプロパティとjQueryの機能をコピーしたが、iOSの途切れ途切れのアニメーションは常にある（のみのiOSに!!）ときのdiv移動中

をのようなIすでに試した解決策：

-webkit-transform: translate3d(0, 0, 0); 

または

-webkit-transform: translateZ(0); 

私は（私が思う）完全に同じコードを持つ他のページのようにアニメーションを滑らかにするものはありません。

今私は違いがあり、どうすればこの問題を解決できるのか分かりません。誰かが既に同様の問題を抱えていて、それに役立つアドバイスをくれたでしょうか？

完全なコードCSS：

.animationTestObject { 
    width: 100px; 
    height: 100px; 
    background-color: black; 
    position: fixed; 
    left: 100px; 
    bottom: -100px; 
    transition: bottom 500ms; 
    -webkit-transition: bottom 500ms; 
    transform: translate3d(0, 0, 0); 
    -webkit-transform: translate3d(0, 0, 0); 
} 

JS：

function startAnimation() { 
    $(".animationTestObject").css('bottom', '100px'); 
} 

Answer 1

がアニメーションしながら、より良いパフォーマンスを得るために、css properties that trigger a relayout（紫のタグが付いたもの）を避けるようにしてください。そのように変換するプロパティ：あなたのケースでは

、あなたは変換をアニメーション化する必要があり

.animationTestObject { 
    width: 100px; 
    height: 100px; 
    position: fixed; 
    left: 100px; 
    bottom: -100px; 
    transition: transform 500ms ease; 
    transform: translate3d(0, 0, 0); 
} 

function startAnimation() { 
    $('.animationTestObject').css('transform', 'translate(0, -100px)'); 
}