お問い合わせはコチラから

CSSアニメーション後にjavascriptを起動する

サイト運営

ページ遷移アニメーションを導入すると、導入前と動きが変わる部分が出てきます。

例えば、ページ遷移のアニメーションが終わる前に、遷移先のページのアニメーションが終わってしまったりします。

その場合は、ページ遷移の分だけ遷移先のアニメーション開始を遅らせればいいのですが、それも面倒です。

遷移先のアニメーションのトリガは、ページ読み込み時であり、ページ遷移アニメーション完了ではないので問題が起きます。

一番いいのは、ページ遷移のアニメーションが完了したタイミングで、目印となるclassを追加してあげて、それをトリガとしてアニメーションを開始することです。

アニメーション完了時に発火するjavascriptを組み合わせることで、実現できますのでメモしておきます。

animationやtransitonの終了イベントを検出するjavascript

こちらの記事が参考になりました。

CSSのアニメーション終了後にイベントを実行する | Monohibi - モノヒビ
CSSでアニメーションさせる方法としてanimationとtransitionの2つのプロパティがあります。これらはJavaScriptと合わせることによって、アニメーション終了後にイベント処理を行うことができます。
<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を動作させることもできるという内容でした。

この記事が気に入ったら フォローしよう
最新情報をお届けします。
この記事を書いた人
ブーン

はるばる日本よりオランダ王国へやってまいりました。
自分の経験が少しでも参考になれば嬉しいです。
お問い合わせは、『こちら』からお願い致します。

\ブーンをフォロー/
スポンサーリンク
サイト運営
\シェアお願いします!/
\ブーンをフォロー/

失敗しないレンタルサーバーランキング

mixhost

不正アクセスに強くて使いやすいおススメサーバー
\本サイトで利用中/
メリット①:自動ウィルス駆除対応
メリット②:サイトの表示速度が速い!
メリット③:転送量の上限が多い!
メリット④:自由にプラン変更ができ、アクセス増にも対応できる!
メリット⑤:バックアップデータが無料で復元できる!
メリット⑥:Wordpressが簡単にインストールできる!
メリット⑦:どのプランでも初期費用が無料!
メリット⑧:10日間の無料お試し期間と30日の返金保証!

Conoha Wing

国内Wordpress最速の最強サーバー
メリット①:圧倒的な表示速度
メリット②:レンタルサーバーと独自ドメインがセットでお得◎
メリット③:プラン変更はすべてのプランで自由自在
メリット④:一か月の利用転送量の制限が緩い(9TB~)
メリット⑤:WordPresサイトの移行が簡単

エックスサーバー

国内シェアNo1の安定性と実績が魅力。ALL SSDで死角なしの万能サーバー。
メリット①:サイトの表示速度が安定して速い!
メリット②:アクセス負荷に強くて安定性が高い!
メリット③:24時間365日の充実サポートで安心!電話サポートもあり!
メリット④:転送量が多い!
メリット⑤:自動バックアップ機能付き!
メリット⑥:WordPressが簡単にインストールできる!
メリット⑦:10日の無料お試し期間がある!

オランダで生きていく
タイトルとURLをコピーしました