Element: transitionrun イベント

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2020年3月⁩.

transitionrun イベントは、 CSS トランジションが最初に生成されたとき、すなわち transition-delay が始まる前に発生します。

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

構文

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

addEventListener("transitionrun", (event) => {}); ontransitionrun = (event) => {};

イベント型

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

イベントプロパティ

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

TransitionEvent.propertyName 読取専用: 文字列で、このトランジションに関連付けられた CSS プロパティの名前が入ります。
TransitionEvent.elapsedTime 読取専用: float` で、このイベントが発行されたときにトランジションが実行されていた時間を秒単位で表します。この値は transition-delay プロパティの影響を受けません。
TransitionEvent.pseudoElement 読取専用: 文字列で、アニメーションが実行する擬似要素の名前が入ります。トランジションが擬似要素上で実行されず、要素上で実行される場合は空文字列 ('') です。

例

このコードは transitionrun イベントのリスナーを追加します。

el.addEventListener("transitionrun", () => { console.log( "トランジションは実行中ですが、まだトランジションは始まっていません。", ); });

同じことを、ontransitionrun プロパティを addEventListener() の代わりに使用して行います。

el.ontransitionrun = () => { console.log( "トランジションの実行が開始され、トランジションの遅延時間が経過した時点でトランジションを開始します。", ); };

ライブ例

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

html

<div class="transition">ここにポインターを当ててください</div> <div class="message"></div>

css

.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 イベントが発生すると実行されるようにします。

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

違いは次の通りです。