CSSのtransition／animationに連動できるJavaScriptのtransitionend／animationend

JavaScriptのイベントのtransitionendとanimationendはそれぞれにCSSのtransitionとanimationの終了を検出する。なので後者を使うときに前者も一緒に使うとサイトで連動する動作を簡単に実現するプログラムが組める。噛み合う金属の歯車

Metal gears by Bill Oxford / Unsplash

一般的にメニューをスライドしたり、ボタンをフェードしたりするなどのコンテンツのアニメーションを介した表示と非表示の切り替えに役立つ。transitionendイベントでtransitionを捕捉する何かをCSSのtransitionで動かしたら当のHTML要素をJavaScriptのaddEventListener()メソッドのtransitionendで補足して連動して別の状態に持って行くのが簡単な使い方だ。transformとaddEventListenerによる連続動作のサンプル🐮スタートリセット牛が右端から左端へ歩き切った三秒後に「終了」という。HTML<div class="cow stop">🐮</div> <br> <button class="start" type="button">スタート</button> <button class="reset1" type="button">リセット</button>CSS.cow {width:min(92.5%, 901px);font-size:x-large;transition:transform 3s} .stop {transform:translateX(100%)} .walk {transform:translateX(0)}JavaScriptconst cow = document.querySelector("div.cow"); const sfc = document.querySelector("button.star1"); const rfc = document.querySelector("button.reset1"); cow.addEventListener("transitionend", function() { if (cow.classList.contains("walk")) { cow.insertAdjacentHTML("beforeend", "「終了」"); }}); sfc.addEventListener("click", function() { cow.classList.add("walk"); }); rfc.addEventListener("click", function() { cow.classList.remove("walk"); cow.textContent = "🐮"; });HTML要素にCSSのtransition:transformを使って時間差を付けて動かす場合、JavaScriptのaddEventListener()メソッドにtransitionendイベントを使って終了を検出すると即座に反応して何かできる。animationendイベントでanimationを捕捉する何かをCSSのanimationで動かしたら当のHTML要素をJavaScriptのaddEventListener()メソッドのanimationendで補足して終わりに連動して別の状態に持って行くのが簡単な使い方だ。opacityとaddEventListenerによる連続動作のサンプル🦁スタートリセットライオンが姿を現し切った三秒後に「終了」という。HTML<div class="lion invisible">🦁</div> <br> <button class="start2" type="button">スタート</button> <button class="reset2" type="button">リセット</button>CSS.lion {font-size:x-large;} .invisible {visibility:hidden} .appear {animation:fadein 3s} @keyframes fadein {from {opacity:0} to {opacity:1}}JavaScriptconst lion = document.querySelector("div.lion"); const sfl = document.querySelector("button.start2"); const rfl = document.querySelector("button.reset2"); lion.addEventListener("animationend", function() { if (lion.classList.contains("appear")) { lion.insertAdjacentHTML("beforeend", "「終了」"); }}); sfl.addEventListener("click", function() { lion.classList.add("appear"); lion.classList.remove("invisible"); }); rfl.addEventListener("click", function() { lion.classList.remove("appear"); lion.classList.add("invisible"); lion.textContent = "🦁"; });HTML要素にCSSのanimationと@keyframesを使って時間差で動かす場合、JavaScriptのaddEventListener()メソッドにanimationendイベントを使って終了を検出すると即座に反応して何かできる。何れも使い方の注意点は双方向（往復や出没など）でHTML要素を別々に扱いたいときは条件分岐のifなどにかけないと両方に同じ結果を繰り返してしまう。およそJavaScriptのtransitionend／animationendイベントはメニューやボタンをCSSのtransition／animationの動作完了に合わせてdisplay:noneやvisibility:hiddenなどで消すのに最適だと思う。時間差を取ってプログラムを実行するには通常はsetTime()メソッドかパフォーマンスをもっと安定させるにはrequestAnimation()メソッドが同じように使えるけれどもtransitionend／animationendイベントはそれに特化していてずれないから消すはずのものが失敗して出てしまうことがないのが嬉しい。JavaScriptでCSSのtransition／animationを検出するイベントはそれぞれの「end」（終了）だけでなくて「start」（開始）や「cancel」（中止）のものもあるからアニメーションを伴う時間差のプログラムに相応しく使い分けられもする。.stop {transform:translateX(100%)}.walk {transform:translateX(0)}.invisible {visibility:hidden}.appear {animation:fadein 3s}@keyframes fadein {from {opacity:0} to {opacity:1}}const cow = document.querySelector("div.cow"); const sfc = document.querySelector("button.start1"); const rfc = document.querySelector("button.reset1"); cow.addEventListener("transitionend", function() { if (cow.classList.contains("walk")) { cow.insertAdjacentHTML("beforeend", "「終了」"); }}); sfc.addEventListener("click", function() { cow.classList.add("walk"); }); rfc.addEventListener("click", function() { cow.classList.remove("walk"); cow.textContent = "🐮"; }); const lion = document.querySelector("div.lion"); const sfl = document.querySelector("button.start2"); const rfl = document.querySelector("button.reset2"); lion.addEventListener("animationend", function() { if (lion.classList.contains("appear")) { lion.insertAdjacentHTML("beforeend", "「終了」"); }}); sfl.addEventListener("click", function() { lion.classList.add("appear"); lion.classList.remove("invisible"); }); rfl.addEventListener("click", function() { lion.classList.remove("appear"); lion.classList.add("invisible"); lion.textContent = "🦁"; });

コメント