GlobalEventHandlers.ontransitionend

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

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

構文

var transitionEndHandler = target.ontransitionend;

target.ontransitionend = Function

値

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

例

この例では、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!";
}

結果

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

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

仕様書

ブラウザーの互換性

関連情報

• このハンドラーを起動する transitionend イベント
• TransitionEvent
• トランジションが開始したときに発生する transitionrun イベント