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

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

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

これらのイベントはtransitionrun、transitionstart、transitionendの順番で発生します。
もしアニメーションが途中でキャンセルされて停止したときには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(){
		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要素の末尾に追加していきます。
これで、イベントが発生したときにイベントに応じたメッセージがページに表示されるようになります。

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

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