JavaScript

レシピ

イベント

CSSのtransitionプロパティによるアニメーションの開始や終了時に処理を実行する

CSSのtransitionプロパティによるアニメーションが終了したタイミングで指定した処理を実行する方法を解説します。

この記事のポイント

  • CSSのtransitionプロパティによるアニメーションは4種類のイベントが発生する

transitionプロパティのアニメーションで発生するイベント

CSSのtransitionプロパティを使ったアニメーションでは、状況に応じて次の4種類のイベントが発生します。

イベント名発生するタイミング
transitionrunアニメーションを開始する直前に発生
transitionstartアニメーションを開始したときに発生
transitionendアニメーションが完了したときに発生
transitioncancelアニメーションを途中でキャンセルしたときに発生

これらのイベントはtransitionruntransitionstarttransitionendの順番で発生します。
もしアニメーションが途中でキャンセルされて停止したときにはtransitioncancelが発生しますが、アニメーション完了前にキャンセルがあったときはtransitionendは発生しません。

今回はa要素を使ったボタンを用意してtransitionプロパティを使ったアニメーションを設定し、4種類のイベントをイベントリスナーに登録して発生するタイミングを確認していきます。
ブラウザで表示すると次のようになり、青い「サンプルボタン」にカーソルを乗せるとアニメーションを開始して、その下にイベントに応じたメッセージを表示します。

ボタンにカーソルを乗せたときの例

このページのHTML、CSS、JavaScriptのコードは以下のようになります。
このコードを使ったサンプルページはこちら

HTML コード例

<article id="content1">
	<h1>JavaScriptレシピ</h1>
	<a class="btn" href="#">サンプルボタン</a>
</article>

CSS コード例

a.btn {
  display: inline-block;
  padding: 10px 20px;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  background-color: #4a93cb;
  transition-property: background-color;
  transition-duration: 1.0s;
  transition-timing-function: ease;
}
a.btn:hover {
  background-color: #7db7e4;
}

JavaScript コード例

window.addEventListener('DOMContentLoaded', function(){

	var btn = document.querySelector(".btn");

	btn.addEventListener("transitionrun", function(){
		createMessage("Transition Run");
	});

	btn.addEventListener("transitionstart", function(){
		createMessage("Transition Start");
	});

	btn.addEventListener("transitionend", function(){
		createMessage("Transition End");
	});

	btn.addEventListener("transitioncancel", function(){v
		createMessage("Transition Cancel");
	});
});

// イベントが発生したときにメッセージを表示する
function createMessage(message) {

	var p_element = document.createElement("p");
	p_element.textContent = message;

	var article_element = document.getElementById("content1");
	article_element.append(p_element);
}

CSSではclass属性btn」のボタンに対してtransition-propertyプロパティtransition-durationプロパティtransition-timing-functionプロパティをそれぞれ指定しています。
アニメーションの長さはtiming-durationプロパティで1秒の設定です。

JavaScriptのアニメーションで発生する4種類のイベントに対してはイベントリスナーで登録し、全てcreateMessageメソッドを実行します。
createMessageメソッドは受け取った文字列を使ってp要素を作成し、ページ上のarticle要素の末尾に追加していきます。
これで、イベントが発生したときにイベントに応じたメッセージがページに表示されるようになります。

ボタンにカーソルを乗せると、イベントはまずtransitionruntransitionstartの2つが順番に発生して、transition-durationプロパティで指定した1秒後にアニメーションが終了したタイミングでtransitionendが発生します。

transitionendが発生する前にボタンからカーソルが離れたときはキャンセル扱いになってtransitioncancelが発生します。

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます!
運営の参考にさせていただきます。