HTMLElement: transitionrun イベント

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

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

バブリング	あり
キャンセル	不可
インターフェイス	`TransitionEvent`
イベントハンドラープロパティ	`ontransitionrun`

例

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

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

同じですが、 ontransitionrun プロパティを addEventListener() の代わりに使用した例です。

el.ontransitionrun = () => {
  console.log('トランジションは開始されており、待ち時間が経過したら動き出します');
};

ライブデモ

以下の例では、単純な <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: 1s;
}

.transition:hover {
  transform: rotate(90deg);
  background: rgba(255,0,0,0);
}

このために、 transitionstart および transitionrun イベントが発生する場所を示す JavaScript を追加します。

const el = document.querySelector('.transition');
const message = document.querySelector('.message');

el.addEventListener('transitionrun', function() {
  message.textContent = 'transitionrun が発生';
});

el.addEventListener('transitionstart', function() {
  message.textContent = 'transitionstart が発生';
});

el.addEventListener('transitionend', function() {
  message.textContent = 'transitionend が発生';
});

相違点は以下のとおりです。

transitionrun は、トランジションが生成されるときに発生します (つまり、遅延時間の始め)。
transitionstart は実際にアニメーションが始まるときに発生します。 (つまり、遅延時間の終わり)。

transitionrun は、遅延時間が終わる前にトランジションが中止されたときにも発生します。トランジションの遅延時間がなかったり、 transition-delay が負の数であった場合には、 transitionrun と transitionstart の両方が発生します。

仕様書

Specification
CSS Transitions Level 2 # transitionrun

ブラウザーの互換性

BCD tables only load in the browser

HTMLElement: transitionrun イベント

例

ライブデモ

仕様書

ブラウザーの互換性

関連情報