『CSS Nite in SAPPORO Vol.15「先どりWebトレンド2015」に登壇して』 で JavaScript との連携を書いたのですが、JavaScriptと合わせて使っていると、 Transition の終了時に合わせて処理を行うようなケースが時折でてきます。
Transition 終了時に JavaScript でイベントを拾えるので、今日はそれを使ったちょっとしたサンプルを紹介。
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');
});デモ：画像クリックで切り替わります
これだけで、エフェクトはCSS、classの付け外し＆要素の順序入れ替えは JavaScript でそれぞれ動かせるようになります。
