transitionend イベント

DOM イベント TransitionEvent

定義と使用法

transitionend イベントはCSS変換が完了したときに発生します。

注記：例えば、CSSが削除された場合などに、変換が完了する前に削除された場合、 transition-property 属性が設定されていない場合、transitionend イベントがトリガーされません。

CSS フェードインに関するさらに詳しい情報が必要な場合は、私たちの CSS3 フェードインチュートリアル。

例

CSS フェードインが終了したときに、<div>要素に対して何かを行います：

// Safari 3.1から6.0までのコード
document.getElementById("myDIV").addEventListener("webkitTransitionEnd", myFunction);
// 標準構文
document.getElementById("myDIV").addEventListener("transitionend", myFunction);

実際に試してみる

構文

object.addEventListener("webkitTransitionEnd", myScript);  // Safari 3.1から6.0までのコード
object.addEventListener("transitionend", myScript);        // 標準構文

注記：Internet Explorer 8またはそれ以前のバージョンではサポートされていません addEventListener() メソッド。

技術的詳細

バブル： サポート
キャンセル可能： サポート
イベントタイプ： TransitionEvent
DOM バージョン： レベル3イベント

ブラウザのサポート

表の数字は、そのイベントを完全にサポートする最初のブラウザバージョンを示しています。

「webkit」、「moz」、または「o」が含まれる数字は、これらのプレフィックスを使用する最初のバージョンを指定します。

イベント Chrome IE Firefox Safari Opera
transitionend 26.0
4.0 (webkit)		 10.0 16.0
4.0 (moz)		 6.1
3.1 (webkit)		 12.1
10.5 (o)

関連ページ

CSS チュートリアル：CSS3 フェードイン

CSS リファレンスマニュアル：CSS3 transition 属性

CSS リファレンスマニュアル：CSS3 transition-property 属性

DOM イベント TransitionEvent