今回は麻雀ではなく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が結構使えます。
コーディングのみで完結できる気軽さも個人的には魅力かなと思います。

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

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