ontransitioncancel
は GlobalEventHandlers
ミックスインのプロパティで、 transitioncancel
イベントを処理するイベントハンドラー (EventHandler
) です。
transitioncancel
イベントは CSS トランジションがキャンセルされたときに送信されます。トランジションがキャンセルされるのは下記のような時です。
- 適用されている対象の
transition-property
プロパティの値が変更された時。 display
プロパティがnone
に変更された時。- 完了する前に、トランジションが停止された時。例えば、マウスオーバーでトランジション中の要素をマウスアウトした時。
構文
var transitionCancelHandler = target.ontransitioncancel;
target.ontransitioncancel = Function
値
関数 (Function
) で、 CSS トランジションがキャンセルされたことを示す transitioncancel
イベントが target
上で発生した場合に呼び出されるものです。対象となるオブジェクトは HTML 要素 (HTMLElement
)、文書 (Document
)、ウィンドウ (Window
) です。この関数は単一の引数、発生したイベントを記述する TransitionEvent
を単一の引数として受け取ります。イベントの TransitionEvent.elapsedTime
プロパティの値は、 transition-duration
の値と同じでなければなりません。
注: elapsedTime
には、トランジション効果が始まる前の時間は含まれていません。つまり、 transition-delay
の値は、待ち時間が終了してアニメーションが始まるまでは 0 である elapsedTime
の値に影響しません。
例
この例では、transitionrun
イベントと transitionend
イベントを使用して、トランジションの開始と終了を検出し、トランジション中にテキスト更新が発生するようにしています。これは、アニメーションやその他のエフェクトを起動して、反応を連鎖させるために使用することもできます。
追加で、click
イベントも使用しています。それで、(display: none;
) で四角を非表示にすることで、transitioncancel
イベントが発行される様子を見ることができます。
HTML
これは <div>
だけを作成して、後は CSS で色やトランジション後のスタイルを指定します。
<div class="box"></div>
CSS
下記の CSS は四角にマウスオーバーする時、色やサイズを変えたり、回転させたりするようなトランジション効果を適用します。
.box {
margin-left: 70px;
margin-top: 30px;
border-style: solid;
border-width: 1px;
display: block;
width: 100px;
height: 100px;
background-color: #0000FF;
color: #FFFFFF;
padding: 20px;
font: bold 1.6em "Helvetica", "Arial", sans-serif;
-webkit-transition: width 2s, height 2s, background-color 2s, -webkit-transform 2s, color 2s;
transition: width 2s, height 2s, background-color 2s, transform 2s, color 2s;
}
.box:hover {
background-color: #FFCCCC;
color: #000000;
width: 200px;
height: 200px;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
JavaScript
次に、トランジションの開始時と終了時にボックスのテキストコンテンツを変更するためにイベントハンドラ-を設定します。
let box = document.querySelector(".box");
box.ontransitionrun = function(event) {
box.innerHTML = "Zooming...";
}
box.ontransitionend = function(event) {
box.innerHTML = "Done!";
}
box.onclick = function() {
box.style.display = 'none';
timeout = window.setTimeout(appear, 2000);
function appear() {
box.style.display = 'block';
}
}
box.ontransitioncancel = function(event) {
console.log('transitioncancel fired after ' + event.elapsedTime + ' seconds.');
}
結果
結果のコンテンツは次のようになります。
四角にマウスオーバーやマウスアウトするときどうなるか見てください。
あと、開発ツールにある JavaScript コンソールも見て、トランジションが終わる前に四角をクリックしたりマウスアウトすると、どんなログが出るか注意してください。
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Transitions ontransitioncancel の定義 |
草案 |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- このハンドラーを起動する
transitioncancel
イベント TransitionEvent
- トランジションが開始したときに発生する
transitionrun
イベント