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

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

このイベントはキャンセルできません。

構文

このイベント名をaddEventListener() などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

addEventListener("transitionend", (event) => { })ontransitionend = (event) => { }

イベント型

TransitionEvent です。Event を継承しています。

イベントプロパティ

親であるEvent から継承したプロパティもあります。

TransitionEvent.propertyName読取専用

文字列で、このトランジションに関連付けられた CSS プロパティの名前が入ります。

TransitionEvent.elapsedTime読取専用

float` で、このイベントが発行されたときにトランジションが実行されていた時間を秒単位で表します。この値はtransition-delay プロパティの影響を受けません。

TransitionEvent.pseudoElement読取専用

文字列で、アニメーションが実行する擬似要素の名前が入ります。トランジションが擬似要素上で実行されず、要素上で実行される場合は空文字列 ('') です。

例

このコードはトランジションを定義している要素を取得し、transitionend イベントのリスナーを追加します。

const transition = document.querySelector(".transition");transition.addEventListener("transitionend", () => {  console.log("Transition ended");});

同じことを、ontransitionend を使用して行う例です。

const transition = document.querySelector(".transition");transition.ontransitionend = () => {  console.log("Transition ended");};

ライブ例

次の例では、単純な<div> 要素に遅延を含むトランジションをスタイル設定しています。

<div>ここにポインターを当ててください</div><div></div>

.transition {  width: 100px;  height: 100px;  background: red;  transition-property: transform, background;  transition-duration: 2s;  transition-delay: 1s;}.transition:hover {  transform: rotate(90deg);  background: transparent;}

これにいくらかの JavaScript を追加して、transitionstart、transitionrun、transitioncancel、transitionend の各イベントが発生すると実行されるようにします。この例では、トランジションをキャンセルするには、トランジションが終了する前にトランジション中のボックスに宛てたマウスを外してください。トランジション終了イベントを発生させるには、トランジションが終了するまでトランジションの上にマウスを当てたままにしてください。

const message = document.querySelector(".message");const el = document.querySelector(".transition");el.addEventListener("transitionrun", () => {  message.textContent = "transitionrun が発生";});el.addEventListener("transitionstart", () => {  message.textContent = "transitionstart が発生";});el.addEventListener("transitioncancel", () => {  message.textContent = "transitioncancel が発生";});el.addEventListener("transitionend", () => {  message.textContent = "transitionend が発生";});

transitionend イベントは両方向に発生します。ボックスの回転が完了し、不透明度が方向に応じて 0 または 1 になったときです。

トランジションの遅延や再生時間がない場合、両方が 0s である場合、または両方とも宣言されていない場合、トランジションは発生せず、トランジションイベントは何も発行されません。

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

仕様書

ブラウザーの互換性

関連情報

• TransitionEvent インターフェイス
• CSS プロパティ:transition,transition-delay,transition-duration,transition-property,transition-timing-function
• 関連イベント:transitionrun,transitionstart,transitioncancel