【JS】CSSアニメーションを再度実行する方法(かんたん)

スポンサーリンク

JS(jQuery)を使って、CSSアニメーションを再度実行する方法です。

CSSアニメーションは、クラス等に設定された時のタイミングで作動しますが、2回目以降はどうすればよいのでしょうか?

最初に思いつくのが、単純にアニメーションのクラスを削除した後、再度追加してあげようと思いつきますが、残念ながらこの方法だとうまくいきません。(アニメーションしません)

↓うまくいかない例。

$(#animation01).removeClass('slideIn');
$(#animation01).addClass('slideIn');

↓うまく行く例。

$(#animation01).removeClass('slideIn');
$(#animation01)[0].offsetWidth = $(#animation01)[0].offsetWidth;
$(#animation01).addClass('slideIn');

注目は2行目。
こんな感じにダミーっぽい1行入れてやると再度CSSアニメーションが動作します。

別の方法として、CSSのdisplay:noneにした後、display:block等、none以外を設定するとアニメーションは再度実行されるみたいです。

CSS Animations Level 1

コメント

タイトルとURLをコピーしました