CSS のTransition 終了時に JavaScript で処理を行う方法

h2ham

6年前

transitionend

transition の終わりを検知するイベントが transitionend になります。古いブラウザ用だとプレフィックスをつけたものを利用しますが、その点は割愛。

transitionend を使用したデモを一つ見てみましょう。

transitionendを使用したギャラリーデモ

HTML

<ul class="demo-gallery">
  <li class="demo-gallery__item"><img src="https://c3.staticflickr.com/3/2696/4327041265_723e4c69b4_b.jpg" alt=""></li>
  <li class="demo-gallery__item"><img src="https://c3.staticflickr.com/3/2643/4208631832_de8bd23566_b.jpg" alt=""></li>
  <li class="demo-gallery__item"><img src="https://c1.staticflickr.com/9/8474/8376649419_77851fd9e2_b.jpg" alt=""></li>
  <li class="demo-gallery__item"><img src="https://c3.staticflickr.com/3/2689/4112154584_8109d68d13_b.jpg" alt=""></li>
  <li class="demo-gallery__item"><img src="https://c3.staticflickr.com/3/2706/4384050511_a45415478c_b.jpg" alt=""></li>
</ul>

CSS

デフォルトが水色のブロックに、 .is-color-change があればピンクになるようなスタイルです

.demo-gallery {
  position: relative;
  margin: 0;
  padding: 0 0 66.2% 0;
  list-style-type: none;
}
.demo-gallery__item {
  position: absolute;
  -webkit-transition: 1s;
  -moz-transition: 1s;
  transition: 1s;
}
.demo-gallery__item img {
  max-width: 100%;
}
.is-fade {
  opacity: 0;
}

JavaScript（jQuery）

$('.demo-gallery__item').on('click', function () {
  $(this).addClass('is-fade');
})
  .on('transitionend', function () {
    $('.is-fade').prependTo($(this).parent()).removeClass('is-fade');
});