97

css3アニメーションの場合にコールバック関数を実装する方法はありますか? Javascript アニメーションの場合は可能ですが、css3 でそれを行う方法が見つかりません。

私が見ることができる1つの方法は、アニメーションの持続時間の後にコールバックを実行することですが、アニメーションが終了した直後にコールバックが常に呼び出されることを保証するものではありません. ブラウザの UI キューに依存します。もっと堅実な方法が欲しい。どんな手掛かり？

4

3 に答える 3

140

はいあります。コールバックはイベントなので、それをキャッチするにはイベント リスナーを追加する必要があります。これは jQuery を使用した例です。

$("#sun").bind('oanimationend animationend webkitAnimationEnd', function() { 
   alert("fin") 
});

または純粋な js:

element.addEventListener("webkitAnimationEnd", callfunction,false);
element.addEventListener("animationend", callfunction,false);
element.addEventListener("oanimationend", callfunction,false);

ライブデモ: http://jsfiddle.net/W3y7h/

于 2011-06-02T05:28:03.570 に答える
4

CSS3 トランジション/ブラウザの互換性も処理するコールバックを実行する簡単な方法は、jQuery Transit Pluginです。例：

//Pulsing, moving element
$("#element").click( function () {
    $('#element').transition({ opacity: 0, x: '75%' }, function () { $(this).transition({ opacity: 1, x: '0%' }).trigger("click"); });
});

JS フィドルのデモ

于 2013-03-21T12:40:14.280 に答える