jQuery だと簡単にできることも使わないと「あれ！？どうするんやろ」なことのひとつ。
CSS3 transition event を bind しています。
jQuery( "#example" ).on( "transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function () {} ); |
transitionend だけで済むようになればこんな醜いコードを書く必要は無くなります。
jQuery を使わない時は addEventListener を使いますが1つしかイベント設定ができません。
イベントを配列にセットして順に設定するしかなさそうです。
配列捜査にforEachを使いました。
var example = document.getElementById( "example" ), events = [ "transitionend", "webkitTransitionEnd", "oTransitionEnd", "MSTransitionEnd" ]; function onTransitionEnd () { events.forEach( function ( event ) { example.removeEventListener( event, onTransitionEnd ); } ); } events.forEach( function ( event ) { example.addEventListener( event, onTransitionEnd, false ); } ); |
こんな感じでしょうか…
jQueryに比べるとだいぶコードがくなるのはしょうがない。
forEach
forEach 非対応ブラウザのことが気になる時は MDN を参考にすると良いかもです。
MDN: Array.forEach
久しぶりに見るとコードが書き換わってました。
ECMA-262, Edition 5 のコメントがあり、ES5 互換になったようです。
8行目のコードが気になる。
if ( this == null ) |
this が null でも undefined でも true 判定できるようにだろうと思うけど。