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
関連情報
GlobalEventHandlers.ontransitioncancel
イベントハンドラーTransitionEvent
インターフェイス- CSS プロパティ:
transition
,transition-delay
,transition-duration
,transition-property
,transition-timing-function
- 関連イベント:
transitionrun
,transitionstart
,transitionend
Document
をターゲットとしたこのイベント:transitioncancel
Window
をターゲットとしたこのイベント:transitioncancel