0

divを右から左に移動するために使用するCSSトランジションがあります-webkit-transform: translateX。これは基本的なスライド移動です(私の場合、Webkitユーザーのみが保証されています)。

私の問題は、アニメーションが完了したときにアクションを実行する必要があることです。これまでは、アニメーションが完了してから 1 ミリ秒実行するために javascript で setTimeout 呼び出しを使用していました。

99% の確率で完全に動作しますが、まれにスムーズに動作せず、問題が発生することがあります。これは、正しい時間に正確にタイムアウトが実行されていないことが原因であることがわかっています。

オンラインでの私の調査から、webkit トランジション エンドのイベント リスナーを追加することについて聞いたことがありますが、それを機能させることができません。他の誰かのオンラインの例では正常に機能します。

jsfiddle.net/jfriend00/5FnwY/

私のアニメーションはJavaScriptによってトリガーされ、ボタンをクリックすると、.move_inクラスがメインdiv要素に追加され、アニメーションが開始されます。CSSは以下です。

.renderZone {
    -webkit-animation-timing-function:ease-in-out;
    -webkit-animation-duration:805ms;
    -moz-animation-timing-function:ease-in-out;
    -moz-animation-duration:805ms;
}

.move_in {
    -webkit-transform: translateX(0%) !important;
    -webkit-animation-name: slideouttoleft;
    -moz-transform: translateX(-0%) !important;
    -moz-animation-name: slideouttoleft;
}

.move_out {
    -webkit-transform: translateX(-100%) !important;
    -webkit-animation-name: slideouttoleft;
    -moz-transform: translateX(-100%) !important;
    -moz-animation-name: slideouttoleft;
}

@-webkit-keyframes slideouttoleft {
    from {
        -webkit-transform: translateX(0);
    }
    to {
        -webkit-transform: translateX(-100%);
    }
}

これにアプローチするための最良の方法、または私がしていることを行うためのより良い方法を誰かが知っていますか? CSS アニメーションをそのまま実行し続ける必要があります。これは、私が多くの実験を行ってきた iOS で最高のパフォーマンスを提供するためです。

誰かが助けてくれることを願っています！

ありがとう！！！

4

1 に答える 1

1

CSS3 には、JavaScript でイベント リストとして使用できる「webkitAnimationEnd」というプロパティがあります。

コード例:

function cssAnimationEnd() {
    //looks for the ID box from the css and fires the event listen when the animation is complete.
    box.addEventListener( 'webkitAnimationEnd', function( event) {
      alert( "Finished animation!" );
    }, false );
}
于 2013-02-01T17:09:13.690 に答える