Element: transitionstart イベント

transitionstart イベントは、 CSS トランジションが実際に始まったとき、すなわち transition-delay が終了した後に発生します。

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

構文

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

addEventListener("transitionstart", (event) => {});

ontransitionstart = (event) => {};

イベント型

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

イベントプロパティ

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

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

例

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

element.addEventListener("transitionstart", () => {
  console.log("トランジション開始");
});

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

element.ontransitionstart = () => {
  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 transition = document.querySelector(".transition");
const message = document.querySelector(".message");

transition.addEventListener("transitionrun", () => {
  message.textContent = "transitionrun が発生";
});

transition.addEventListener("transitionstart", () => {
  message.textContent = "transitionstart が発生";
});

transition.addEventListener("transitionend", () => {
  message.textContent = "transitionend が発生";
});

違いは次の通りです。

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

仕様書

Specification
CSS Transitions # transitionstart

ブラウザーの互換性

BCD tables only load in the browser