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