CSSアニメーションのイベントを試してみる

transitionやanimationを使ったアニメーションで、開始時や終了時をJavaScriptで取得する方法を試してみます。

サンプルコード

ボタンクリック時にtransitionやanimationでアニメーションする要素を用意して、各イベントを試してみます。
まずはtransitionです。

<button id="button">アニメーション実行</button>
<div id="sample" class="sample"></div>

要素に.is-moveが追加された時に、transitionでアニメーションするようにします。

.sample {
	width: 50px;
	height: 50px;
	background: red;
	transition: transform 3s linear 500ms;
}
.sample.is-move {
	transform: translateX(200px);
}

ボタンクリック時に.is-moveを追加・削除するように設定します。

const button = document.getElementById('button');
const element = document.getElementById('sample');
button.addEventListener('click', function() {
	element.classList.toggle('is-move');
}, false);
element.addEventListener('transitionrun', function() {
	console.log('transitionrun');
}, false);
element.addEventListener('transitionstart', function() {
	console.log('transitionstart');
}, false);
element.addEventListener('transitionend', function() {
	console.log('transitionend');
}, false);
element.addEventListener('transitioncancel', function() {
	console.log('transitioncancel');
}, false);

transitionのデモページ
6〜17行目がtransiton中の状態に応じて発火するイベントで、それぞれ以下の内容になります。

transitionrun アニメーションの開始時で、transition-delayの始まる前に発火。
transitionstart アニメーションの開始時で、transition-delayの終了後に発火。
transitionend アニメーション終了時に発火。アニメーションが途中でキャンセルされた場合は発火しない。
transitioncancel アニメーションがキャンセルされた時に発火。

上記のうちtransitionrunとtransitionstart、transitioncancelに関しては実験的な機能となっているようなので、使用する際はご注意ください。

次にanimationを試してみます。
animationは繰り返す回数が1回とループの2種類を用意します。

<button id="button">アニメーション実行(1回)</button>
<div id="sample" class="sample"></div>

<button id="button2">アニメーション実行(ループ)</button>
<div id="sample2" class="sample2"></div>

transitionと同じく、要素に.is-moveが追加された時にアニメーションするようにします。

.sample,
.sample2 {
	width: 50px;
	height: 50px;
	background: red;
}
.sample.is-move {
    animation: sample 3s linear 500ms;
} 
.sample2.is-move {
    animation: sample 3s linear 500ms infinite alternate;
} 
@keyframes sample {
    0% {
		transform: translateX(0);
    }
    100% {
		transform: translateX(200px);
    }
}

ボタンクリック時に.is-moveを追加・削除するように設定します。

const button = document.getElementById('button');
const element = document.getElementById('sample');
button.addEventListener('click', function() {
	element.classList.toggle('is-move');
}, false);
element.addEventListener('animationstart', function() {
	console.log('animationstart');
}, false);
element.addEventListener('animationend', function() {
	console.log('animationend');
}, false);
element.addEventListener('animationiteration', function() {
	console.log('animationiteration');
}, false);
element.addEventListener('animationcancel', function() {
	console.log('animationcancel');
}, false);

const button2 = document.getElementById('button2');
const element2 = document.getElementById('sample2');
button2.addEventListener('click', function() {
	element2.classList.toggle('is-move');
}, false);
element2.addEventListener('animationstart', function() {
	console.log('animationstart');
}, false);
element2.addEventListener('animationend', function() {
	console.log('animationend');
}, false);
element2.addEventListener('animationiteration', function() {
	console.log('animationiteration');
}, false);
element2.addEventListener('animationcancel', function() {
	console.log('animationcancel');
}, false);

animationのデモページ
6〜17、24〜35行目が状態に応じて発火するイベントで、それぞれ以下の内容になります。

animationstart アニメーションの開始時で、animation-delayの終了後に発火。
animationend アニメーション終了時に発火。アニメーションが途中でキャンセルされた場合は発火しない。
animationiteration アニメーションの反復が終了し、次の回開始時に発火。animationendと同時には発火しない。
animationcancel アニメーションがキャンセルされた時に発火。

上記のうちanimationcancelだけ実験的な機能となっています。

参考サイト

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2023年5月
 123456
78910111213
14151617181920
21222324252627
28293031