【jQuery】CSSアニメーション終了時に処理を行う方法

【jQuery】CSSアニメーション終了時に処理を行う方法 jQuery

CSS で定義したアニメーションやトランジションが終わったタイミングで、次の処理を jQuery で実行したいことがあります。その場合は、ブラウザが発火するイベント animationend または transitionend を利用します。jQuery の .on() で監視することで、アニメーション終了後に任意の処理を実行可能です。

CSSアニメーション終了時の処理（animationend）

<div class="box">アニメーションする要素</div>

.box {
  width: 100px;
  height: 100px;
  background: #02a1cd;
  animation: fadeMove 2s forwards;
}

@keyframes fadeMove {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

$('.box').on('animationend', function() {
  alert('アニメーションが終了しました');
});

animationend はアニメーションが完了した瞬間に発火します。複数の @keyframes が連続する場合は、その数だけイベントが発火する点に注意しましょう。

CSSトランジション終了時の処理（transitionend）

<button class="btn">クリックで拡大</button>
<div class="panel">パネル</div>

.panel {
  width: 100px;
  height: 100px;
  background: #e35f57;
  transition: all 0.5s ease;
}
.panel.active {
  width: 200px;
  height: 200px;
}

$('.btn').on('click', function() {
  $('.panel').toggleClass('active');
});

$('.panel').on('transitionend', function() {
  console.log('トランジションが終了しました');
});

transitionend は CSS の transition が完了するたびに発火します。複数のプロパティにトランジションを設定している場合は、そのプロパティごとにイベントが発火する点に注意してください。

ベンダープレフィックス対応

近年は不要になりつつありますが、古いブラウザに対応させる場合は webkitAnimationEnd や oAnimationEnd などのイベントも併記します。 

$('.box').on('animationend webkitAnimationEnd oAnimationEnd', function() {
  console.log('クロスブラウザ対応のアニメーション終了イベント');
});

まとめ

  • CSSアニメーション終了時は animationend を使う
  • CSSトランジション終了時は transitionend を使う
  • 複数プロパティや複数アニメーションがある場合は、イベントが複数回発火する点に注意
  • 古いブラウザ対応が必要ならベンダープレフィックス付きイベントも併記

jQuery の .on() を利用すれば、CSS アニメーションやトランジション完了後に柔軟な処理を実装できます。