Css3アニメーションの場合にコールバック関数を実装する方法はありますか? Javascriptアニメーションの場合は可能ですが、css3でそれを行う方法が見つかりません。
私が見ることができる1つの方法は、アニメーション期間の後にコールバックを実行することですが、それはアニメーションが終了した直後に常にコールされることを保証しません。ブラウザのUIキューに依存します。より堅牢な方法が必要です。どんな手掛かり?
はいあります。コールバックはイベントなので、イベントリスナーを追加してキャッチする必要があります。これは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/
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"); });
});