GlobalEventHandlers.ontransitionend

ontransitionendGlobalEventHandlers ミックスインのプロパティで、 transitionend イベントを処理するイベントハンドラー (EventHandler) です。

transitionend イベントは、 CSS トランジションが完了すると発生します。

トランジションの実行が完了する前に対象ノードからトランジションが削除された場合、 transitionend イベントは生成されません。これは、対象に適用される transition-property 属性の値を変更することで発生します。もう一つは、 display 属性が none に設定されている場合です。

構文

var transitionEndHandler = target.ontransitionend;

target.ontransitionend = Function

関数 (Function) で、 CSS トランジションの完了を示す transitionend イベントが target 上で発生した場合に呼び出されるものです。対象となるオブジェクトは HTML 要素 (HTMLElement)、文書 (Document)、ウィンドウ (Window) です。この関数は単一の引数、発生したイベントを記述する TransitionEvent を単一の引数として受け取ります。イベントの TransitionEvent.elapsedTime プロパティの値は、 transition-duration の値と同じでなければなりません。

elapsedTime には、トランジション効果が始まる前の時間は含まれていません。つまり、 transition-delay の値は、待ち時間が終了してアニメーションが始まるまでは 0 である elapsedTime の値に影響しません。

この例では、transitionrun イベントと transitionend イベントを使用して、トランジションの開始と終了を検出し、トランジション中にテキスト更新が発生するようにしています。これは、アニメーションやその他のエフェクトを起動して、反応を連鎖させるために使用することもできます。

HTML

これは単純に <div> を作成するだけで、以下の CSS でスタイルを変更して、ボックスの大きさを変更したり色を変更したりします。

<div class="box"></div>

CSS

以下の CSS は、ボックスのスタイルを設定し、ボックスの色と大きさを変化させ、マウスカーソルがボックスの上に乗っている間にボックスが回転するようなトランジション効果を適用しています。

.box {
  margin-left: 70px;
  margin-top: 30px;
  border-style: solid;
  border-width: 1px;
  display: block;
  width: 100px;
  height: 100px;
  background-color: #0000FF;
  color: #FFFFFF;
  padding: 20px;
  font: bold 1.6em "Helvetica", "Arial", sans-serif;
  transition: width 2s, height 2s, background-color 2s, transform 2s, color 2s;
}

.box:hover {
  background-color: #FFCCCC;
  color: #000000;
  width: 200px;
  height: 200px;
  transform: rotate(180deg);
}

JavaScript

次に、トランジションの開始時と終了時にボックスのテキストコンテンツを変更するためにイベントハンドラ-を設定します。

let box = document.querySelector(".box");
box.ontransitionrun = function(event) {
  box.innerHTML = "Zooming...";
} 
box.ontransitionend = function(event) {
  box.innerHTML = "Done!";
}

結果

結果のコンテンツは次のようになります。

マウスカーソルをボックスの上に置いてから、マウスを移動させるとどうなるかに注目してください。

仕様書

仕様書 状態 備考
CSS Transitions
ontransitionend の定義
草案

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
ontransitionendChrome 完全対応 あり
代替名
完全対応 あり
代替名
代替名 非標準の名前 onwebkittransitionend を使用しています。
Edge 完全対応 ≤79
代替名
完全対応 ≤79
代替名
代替名 非標準の名前 onwebkittransitionend を使用しています。
Firefox 完全対応 51IE ? Opera ? Safari 完全対応 ありWebView Android 完全対応 あり
代替名
完全対応 あり
代替名
代替名 非標準の名前 onwebkittransitionend を使用しています。
Chrome Android 完全対応 あり
代替名
完全対応 あり
代替名
代替名 非標準の名前 onwebkittransitionend を使用しています。
Firefox Android 完全対応 51Opera Android ? Safari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
代替名
完全対応 あり
代替名
代替名 非標準の名前 onwebkittransitionend を使用しています。

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明
非標準の名前を使用しています。
非標準の名前を使用しています。

関連情報