Element: transitioncancel イベント
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2020年11月以降、すべてのブラウザーで利用可能です。
transitioncancel イベントは、 CSS トランジションがキャンセルされたときに発生します。
構文
このイベント名を addEventListener() などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
addEventListener("transitioncancel", (event) => { })
ontransitioncancel = (event) => { }
イベント型
TransitionEvent です。 Event を継承しています。
イベントプロパティ
親である Event から継承したプロパティもあります。
TransitionEvent.propertyName読取専用-
文字列で、このトランジションに関連付けられた CSS プロパティの名前が入ります。
TransitionEvent.elapsedTime読取専用-
float` で、このイベントが発行されたときにトランジションが実行されていた時間を秒単位で表します。この値は
transition-delayプロパティの影響を受けません。 TransitionEvent.pseudoElement読取専用-
文字列で、アニメーションが実行する擬似要素の名前が入ります。トランジションが擬似要素上で実行されず、要素上で実行される場合は空文字列 (
'') です。
例
このコードはトランジションを定義している要素を取得し、transitioncancel イベントのリスナーを追加します。
const transition = document.querySelector(".transition");
transition.addEventListener("transitioncancel", () => {
console.log("Transition canceled");
});
同じことを、ontransitioncancel プロパティを addEventListener() の代わりに使用して行った例です。
const transition = document.querySelector(".transition");
transition.ontransitioncancel = () => {
console.log("Transition canceled");
};
ライブ例
次の例では、単純な <div> 要素に遅延を含むトランジションをスタイル設定しています。
<div class="transition"></div>
<div class="message"></div>
.transition {
width: 100px;
height: 100px;
background: red;
transition-property: transform, background;
transition-duration: 2s;
transition-delay: 2s;
}
.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 が発生";
});
transitioncancel イベントは transitionrun イベントが発生した後、transitionend イベントが発生する前にトランジションがどちらかの方向に取り消された場合に発行されます。
トランジションの遅延や再生時間がない場合、両方が 0s である場合、または両方とも宣言されていない場合、トランジションは発生せず、トランジションイベントは何も発行されません。
transitioncancel イベントが発行された場合、transitionend イベントは発行されません。
仕様書
| 仕様書 |
|---|
| CSS Transitions Module Level 1 # transitioncancel |
| CSS Transitions Module Level 1 # dom-globaleventhandlers-ontransitioncancel |
ブラウザーの互換性
関連情報
TransitionEventインターフェイス- CSS プロパティ:
transition,transition-delay,transition-duration,transition-property,transition-timing-function - 関連イベント:
transitionrun,transitionstart,transitionend