HTMLElement: transitionstart イベント

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

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

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

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

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

似ていますが、 ontransitionstart プロパティを addEventListener() の代わりに使用したものです。

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

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

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

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

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

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

仕様書

Specification
CSS Transitions Level 2
# transitionstart

ブラウザーの互換性

BCD tables only load in the browser

関連情報