HTMLElement: transitioncancel イベント

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

transitioncancel イベントは、 CSS トランジションがキャンセルされたときに発生します。

詳しくは GlobalEventHandlers.ontransitioncancel をご覧ください。

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

例

このコードは、トランジションが定義され、 transitioncancel イベントにリスナーを追加した要素を取得します。

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

transition.addEventListener('transitioncancel', () => {
  console.log('トランジションがキャンセルされました');
});

同様に、 ontransitioncancel プロパティを addEventListener() の代わりに使用すると以下のようになります。

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

transition.ontransitioncancel = () => {
  console.log('トランジションがキャンセルされました');
};

ライブデモ

このデモででは、単純な <div> 要素を配置し、 delay を含むトランジションをスタイル付けしています。

<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);
}

このため、いくらかの JavaScript を追加して transitionstart, transitionrun, transitioncancel, transitionend の各イベントの発生を示します。この例では、トランジションをキャンセルするには、トランジションが終了する前に、トランジションするボックスへのホバーを停止します。トランジションの終了イベントを発生させるには、トランジションが終了するまでホバーしたままにしておきます。

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

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

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

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

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

transitioncancel イベントは transitionrun イベントが発生した後、 transitionend が発生する前に、どちらかの方向にトランジションがキャンセルされた場合に発生します。

トランジションの遅延や継続時間がない場合、両方が 0 であったり、どちらも宣言されていない場合は、トランジションは発生せず、トランジションイベントは何も発行されません。

transitioncancel イベントが発生した場合、transitionend イベントは発行されません。

仕様書

Specification
CSS Transitions Level 2 # transitioncancel

ブラウザーの互換性

BCD tables only load in the browser

HTMLElement: transitioncancel イベント

例

ライブデモ

仕様書

ブラウザーの互換性

関連情報