3

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);
            });
}
4

1 に答える 1

5

これでうまくいくようです：http://jsfiddle.net/cuzzea/9WGGf/私はちょうどあなたの機能を変更しました：

 "translate3d(0,"+measurement+",0)"

に

 "translate3d(0,"+measurement+"px,0)"

測定値（「px」）がないと機能しませんでした。

于 2012-08-26T07:49:05.360 に答える