transitioncancel ( ontransitioncancel )イベント
transitioncancel ( ontransitioncancel )イベントは、簡易なCSS アニメーションを定義するtransition においてその CSS アニメーションの効果が中断されたら発生するイベントです。
document.getElementById('example').addEventListener("transitioncancel", (event)=>{
console.log( 'event type : ' + event.type );
});
詳しくは Example を参照してください
transition プロパティは、スタイル変更を CSS アニメーションの効果として設定することができます。
構文（Syntax）
HTMLPreElement にイベントハンドラーを定義する方法には以下があります。
in HTML
<tagelement ontransitioncancel ="function(); ...;">
in JavaScript
object.ontransitioncancel = function(){... };
addEventListener()
関数の呼び出し。関数名のみ使用で、event 以外の引数が渡せない。
object.addEventListener("transitioncancel", function_name);
スクリプトを直接記述する方法。スクリプトから関数を呼び出せる。
object.addEventListener("transitioncancel", ()=>{ ... },false);
// または
object.addEventListener("transitioncancel",function(){ ... },false);
イベントについてはEventを参照してください。 イベントの監視についてはEventTargetが担っています。
備考（Remarks）
| Bubbles | Yes |
| Cancelable | No |
| Interface | Event |
| Supported HTML Elements | 全般 |
Example
transitioncancel ( ontransitioncancel )イベントの例です。
以下の例で、CSS アニメーションが動いている途中でポインターをエレメントから外してください。すると、CSS アニメーションは中断します。
中断されると transitioncancel イベントが発生します。
transition による CSS アニメーションに関連するイベント
| イベント | 概要 |
|---|---|
| ontransitioncancel | CSS アニメーションの効果が中断されたら |
| ontransitionend | CSS アニメーションが終了したら |
| ontransitionrun | CSS アニメーションが始まったら。遅滞時間の間は発生しない |
| ontransitionstart | 遅滞時間に関係なく、設定された CSS アニメーションが始まったら |