クロスブラウザを意識した「transitionend 」

CSS Niteビギナーズ：HTML5+CSS3でwebKitTransitionEnd を紹介したところ、「クロスブラウザでどうするの？」と質問をいただいたので補足しておきます。

次のようなtransitionアニメーションがあったとして、

div{
	background: #FF0000;
	border: 1px solid black;
	width:100px;
	height: 100px;
	margin:20px;
	position: relative;
	-webkit-transition:all 400ms linear;
	-moz-transition:all 400ms linear;
	-ms-transition:all 400ms linear;
	-o-transition:all 400ms linear;
	transition:all 400ms linear;
}
div:hover{
	width:500px;
}

次のようにイベントを指定するとクロスブラウザでtransitionend イベントを利用できます。

$("div").on("oTransitionEnd mozTransitionEnd webkitTransitionEnd transitionend",function(){
	//do something
});

sample

現在は、ほとんどのブラウザは「 transitionend」で動作しますが、古いブラウザも考慮して、「oTransitionEnd」、「mozTransitionEnd」、「webkitTransitionEnd」も入れておくとよいでしょう。IE10は「 transitionend」で動作しますので「msTransitionEnd」は特に不要です。

関連エントリー

CSS3のkeyframe AnimationをFPSベースで設定する「fpsAnimation.js」
@keyframesとAndroid
CSS3のtransitionでアニメーションするjQueryプラグイン「jQuery transition Animate」

スポンサードリンク

«Sass/Compassで保存した際に非圧縮と圧縮したCSSファイルを出力する | メイン | CSS3アニメーションを利用したサンプル»