1
/
5

【JavaScript】animationendとtransitionendでCSSアニメーションの完了時にイベント処理を行う




今回は麻雀ではなくJavaScriptでCSSアニメーションの完了後にイベント処理を行う方法をご紹介します。

イベントの種類

CSSのイベントにはtransition とanimationの2種類が存在します。

名前の通りなのですが、
transitionの完了を検知するにはtransitionend
animationの完了を検知するにはanimationendを使用します。

実際のJavaScriptの記述はこんな感じです。

const element = document.querySelector('.class');

//animationendの場合
element.addEventLisner('animationend', () => {
//アニメーション完了後に実行する内容を記述
});

//transitionendの場合
element.addEventLisner('transitionend', () => {
//アニメーション完了後に実行する内容を記述
});

実際に動かしてみる

今回はanimationendの方を使用して簡単にデモを作りました。

ロージーが出現したあとに、続けてカールが出てきます。

仕組みを理解する

まずはHTMLから。

<!--ロージーの画像-->
<img class="item item1" src="http://develop.logical-studio.com/wp-content/uploads/2019/09/%E3%82%A2%E3%82%BB%E3%83%83%E3%83%88-2.png" alt="ロージー" >

<!--カールの画像-->
<img class="item item2" src="http://develop.logical-studio.com/wp-content/uploads/2019/09/%E3%82%A2%E3%82%BB%E3%83%83%E3%83%88-1.png" alt="カール">

ロージーとカールの画像を並べただけです。超シンプル。
ロージーの画像には.item1、カールの画像には.item2とそれぞれユニークなclassを設定しました。

CSSはこんな感じで記述しています。

body{
text-align: center;
}

.item {
opacity: 0;
transform: translateY(50%);
}

.item1,
.item2.active {
animation: itemMove 1s ease both;
}

@keyframes itemMove {
0% {
opacity: 0;
transform: translateY(50%);
}

50% {
opacity: 1;
}

100% {
opacity: 1;
transform: translateY(0);
}
}

アニメーションはCSSでつけます。

.item1は読み込み時に、.item2は.activeが付与されている場合にアニメーションします。

最後に肝心のJavaScriptはこんな感じです。

const item1 = document.querySelector('.item1');
const item2 = document.querySelector('.item2');

item1.addEventListener('animationend', () => {
//item1のアニメーションが完了したらitem2に.activeを付与する
item2.classList.add('active');
});

仕組みはコード内にコメントアウトで書いてある通りです。
まず、ページ読み込み時に.item1のアニメーションが開始します。
それが終わると、.item2 に.activeが付与され同様のアニメーションを開始します。

jQueryでも記述可能

ちなみに、同じ内容をJQueryで記述するとこんな感じになります。

const item1 = $('.item1');
const item2 = $('.item2');

item1.on('animationend', () => {
//item1のアニメーションが完了したらitem2に.activeを付与する
item2.addClass('active');
});

オープニングアニメーションなどに

cssとtransitionend 、animationendの組み合わせで簡単なオープニングアニメーションを作成してみました。

このように動きはすべてCSSで完結させることができますので、結構気軽に導入できるかなと思います。
CSSアニメーションはJavascriptより動作も軽いので、その点も大きなメリットかなと思います。

最後に

動画、canvas、APNGなどサイト動きを持たせる方法は様々ですが、サイトによってはこのぐらいサクっと動きを付けたいこともあるかなと思います。

そんな時にはtransitionend、animationendが結構使えます。
コーディングのみで完結できる気軽さも個人的には魅力かなと思います。

さて、弊社ロジカルスタジオではフロントエンドエンジニアをはじめ様々な職種で一緒に働ける方を募集しております。

採用サイトには会社の雰囲気社員インタビューなど、たくさん情報が掲載されているのでお気軽に覗いてみてください!


フロントエンドエンジニア
即戦力募集!最新技術を追い求めるフロントエンドエンジニアをWanted!
ロジカルスタジオは、テクノロジーとデザインの視点からクライアントの課題解決をめざす、大阪のクリエイティブプロダクションです。 クライアントの期待を超えて「もっと良くなる、を見つける」のが私たちのスタイル。企画・提案からデザイン制作・システム構築、運用、改善提案をワンストップで行えるのが一番の強みです。近年ではその実績と品質が評価され、案件も急増しています。 代表の古川が掲げる企業理念は「絆を大切に、周りの人を豊かにし、社会に貢献する」。 私たちはこのミッションを推進するため、「新しい技術へのチャレンジ精神」を軸に、「切磋琢磨する仲間」と「働きやすい職場環境」を整え、「成長と可能性を大切にする風土」を育ててきました。 2019年9月に増床し、外部向けのセミナーにも活用できるカンファレンスルームを拡充。スタッフによる公式ブログや、マスコットキャラクター「ロージー&カール」によるTwitterなど、情報発信も強化しています。 可能性の芽をすくい上げられるこの場所を、より大きくしていきたい。 私たちと一緒に、このビジョンを実現しませんか。
株式会社ロジカルスタジオ
株式会社ロジカルスタジオ's job postings
4 Likes
4 Likes

Weekly ranking

Show other rankings
If this story triggered your interest, go ahead and visit them to learn more