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 September 2015.

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 が発生";
});

違いは次の通りです。

transitionrun は、トランジションが作成されたとき（つまり、遅延が始まるとき）に発生します。
transitionstart は、実際のアニメーションが始まったとき（つまり、遅延が終わったとき）に発生します。

transitionrun は、トランジションが遅延時間内にキャンセルされた場合でも発生します。トランジションの遅延がない場合や、transition-delay が負の場合は、transitionrun と transitionstart の両方が発生します。

仕様書

Specification
CSS Transitions # transitionrun

ブラウザーの互換性

BCD tables only load in the browser