Element: transitionend イベント
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.
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 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: 2s;
}
.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", () => {
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
イベントは発行されません。
仕様書
Specification |
---|
CSS Transitions # transitionend |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
TransitionEvent
インターフェイス- CSS プロパティ:
transition
,transition-delay
,transition-duration
,transition-property
,transition-timing-function
- 関連イベント:
transitionrun
,transitionstart
,transitioncancel