HTMLElement: transitionrun イベント

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

例

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

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

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

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

transition.addEventListener('transitionrun', function() {
  message.textContent = 'transitionrun fired';
});

transition.addEventListener('transitionstart', function() {
  message.textContent = 'transitionstart fired';
});

transition.addEventListener('transitionend', function() {
  message.textContent = '';
});

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

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

仕様書

ブラウザーの対応

関連情報

• GlobalEventHandlers.ontransitionsrun イベントハンドラー
• TransitionEvent インターフェイス
• CSS プロパティ: transition, transition-delay, transition-duration, transition-property, transition-timing-function
• 関連イベント: transitionend, transitionstart, transitioncancel
• Document に対するこのイベント: transitionrun
• Window に対するこのイベント: transitionrun