ページ遷移アニメーションを導入すると、導入前と動きが変わる部分が出てきます。
例えば、ページ遷移のアニメーションが終わる前に、遷移先のページのアニメーションが終わってしまったりします。
その場合は、ページ遷移の分だけ遷移先のアニメーション開始を遅らせればいいのですが、それも面倒です。
遷移先のアニメーションのトリガは、ページ読み込み時であり、ページ遷移アニメーション完了ではないので問題が起きます。
一番いいのは、ページ遷移のアニメーションが完了したタイミングで、目印となるclassを追加してあげて、それをトリガとしてアニメーションを開始することです。
アニメーション完了時に発火するjavascriptを組み合わせることで、実現できますのでメモしておきます。
animationやtransitonの終了イベントを検出するjavascript
こちらの記事が参考になりました。
CSSのアニメーション終了後にイベントを実行する | Monohibi - モノヒビ
CSSでアニメーションさせる方法としてanimationとtransitionの2つのプロパティがあります。これらはJavaScriptと合わせることによって、アニメーション終了後にイベント処理を行うことができます。
monohibi.com
<script>
document.addEventListener("DOMContentLoaded", function(event) {
const element = document.getElementById('show')
element.addEventListener('animationend', () => {
// アニメーション終了後に実行する内容
alert('animationend')
})
element.addEventListener('webkitAnimationEnd', () => {
// アニメーション終了後に実行する内容
alert('webkitAnimationEnd')
})
});
</script>classで選択する場合は、配列で返ってくるので、element[0]になる点注意。
<script>
document.addEventListener("DOMContentLoaded", function(event) {
const element = document.getElementsByClassName('show')
element[0].addEventListener('animationend', () => {
// アニメーション終了後に実行する内容
alert('animationend')
})
element[0].addEventListener('webkitAnimationEnd', () => {
// アニメーション終了後に実行する内容
alert('webkitAnimationEnd')
})
});
</script>まとめ
特定のエレメントのアニメーション終了イベントが取得できると、色々使い道がありそうなTipsです。
アニメーションを開始するためのjavascriptはよく使われますが、アニメーション終了時のイベントでjavascriptを動作させることもできるという内容でした。
