Sencha Touch 2 を使用して UIWebview で実行する iPhone 用の HTML5 アプリを作成しています。
CSS アニメーションに役立ついくつかのメソッドを作成しました。そのうちの 1 つは Y 軸に変換されます。アニメーションをスムーズにするために、CSS で-webkit-backface-visibilityなどを設定しました。Webkit パースペクティブとWebkit preserve-3dを試しましたが、役に立たないようです。
とにかく、アニメーションが非常に滑らかになるところまで来ました。問題は、要素の大きなグループを同時に翻訳すると、そのうちの 1 つが翻訳されないことです。
A、B、C、D、E、F を上に翻訳しているとしましょう。F は最後までスキップします -- 翻訳はありません。-webkit-transformが-webkit-transition-duration の前に設定されているかのようですが、これは私のコードで起こっていることではありません。さらにA、B、C、D、Eのアニメもバッチリ。
これが要素の大規模なグループをアニメーション化する場合にのみ発生するかどうかはわかりませんが、現在はそのようになっているようです. それが F に起こった場合、それは常に F にも起こります。つまり、少なくともその意味では一貫しています。
変換と期間に等しい新しいクラス スタイルを持つ要素を動的に作成し、それを DOM に埋め込み、要素のクラスをスタイルのクラスに等しく設定することで、それを修正しようとさえしました。私は同じ問題を抱えています。
つまり、 Animations.translateYの最終行をsetTimeout 関数に埋め込むと、 1 ミリ秒の遅延があっても、すべてが常にアニメーション化されます。ただし、これにより、約 33% の確率で画面がちらつくことがあります。
ブラウザーの一貫性に関しては、PC のクロムと iPhone デバイスの UIWebview の両方で (setTimeout なしで) アニメーションが表示されません。iPhone デバイスでちらつき (setTimeout を使用) のみが表示されます。
Animations.translateY = function(element, measurement, duration, callback, easing)
{
Animations.setAnimationCallback(element,callback)
var css = "translate3d(0,"+measurement+",0)";
duration = parseFloat(duration);
element.style['-webkit-transition-duration'] = duration + 's';
element.style['-webkit-transform'] = css
}
アニメーション コールバック コード..コールバックが実際に起動することはないため、これは無関係だと思います (0 を取るアニメーションはコールバックを起動しません)。
Animations.setAnimationCallback = function(element, callback)
{
//set callback handler
element.addEventListener('webkitTransitionEnd',
function(){
//set animation duration back to 0
this.style['-webkit-transition-duration'] = "0s";
if(callback != null)
{
callback();
}
this.removeEventListener('webkitTransitionEnd', arguments.callee, null);
});
}