HTMLElement: transitionend イベント

transitionend イベントは、 CSS トランジションが完了したときに発生します。トランジションが完了前に削除された場合、例えば transition-property が削除されたり displaynone に設定されたりした場合、このイベントは生成されません。

バブリング あり
キャンセル可能 はい
インターフェイス TransitionEvent
イベントハンドラープロパティ ontransitionend

transitionend イベントは、トランジションの状態への移行が終了したときと、既定またはトランジションのない状態に完全に戻ったときの両方向で発生します。トランジションの遅延や継続時間がない場合、両方が 0 である場合、またはどちらも宣言されていない場合、トランジションは行われず、トランジションイベントは何も発生しません。 transitioncancel イベントが発生した場合、 transitionend イベントは発生しません。

This code gets an element that has a transition defined and adds a listener to the transitionend event:

const transition = document.querySelector('.transition');

transition.addEventListener('transitionend', () => {
  console.log('トランジション終了');
});

同様に、 ontransitionend を使用した例です。

const transition = document.querySelector('.transition');

transition.ontransitionend = () => {
  console.log('トランジション終了');
};

ライブデモ

このデモででは、単純な <div> 要素を配置し、遅延を含むトランジションをスタイル付けしています。

<div class="transition">ここにマウスを当ててください</div>
<div class="message"></div>
.transition {
  width: 100px;
  height: 100px;
  background: rgba(255,0,0,1);
  transition-property: transform, background;
  transition-duration: 2s;
  transition-delay: 1s;
}

.transition:hover {
  transform: rotate(90deg);
  background: rgba(255,0,0,0);
}

このため、いくらかの JavaScript を追加して transitionstart, transitionrun, transitioncancel, transitionend の各イベントの発生を示します。 この例では、トランジションをキャンセルするには、トランジションが終了する前に、トランジションするボックスへのホバーを停止します。トランジションの終了イベントを発生させるには、トランジションが終了するまでホバーしたままにしておきます。

const message = document.querySelector('.message');
const el = document.querySelector('.transition');

el.addEventListener('transitionrun', function() {
  message.textContent = 'transitionrun が発生';
});

el.addEventListener('transitionstart', function() {
  message.textContent = 'transitionstart が発生';
});

el.addEventListener('transitioncancel', function() {
  message.textContent = 'transitioncancel が発生';
});

el.addEventListener('transitionend', function() {
  message.textContent = 'transitionend が発生';
});

transitionend イベントは、ボックスの回転が終了し、不透明度が 0 または 1 になったとき、どちらの場合も発生します。

トランジションの遅延や継続時間がない場合、両方が 0 であったり、どちらも宣言されていない場合は、トランジションは発生せず、トランジションイベントは何も発行されません。

transitioncancel イベントが発生した場合、transitionend イベントは発行されません。

仕様書

Specification
CSS Transitions Level 2
# transitionend

ブラウザーの互換性

BCD tables only load in the browser

関連情報