DOM

：

：

Document：transitioncancel イベント

　編集：2022.10.11 by T.A.

[Edge]。実験的。→、

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

このイベントは、がキャンセルされたときに発行されます。

バブリング あり
キャンセル可能 いいえ
インターフェイス TransitionEvent
イベント ハンドラー プロパティ ontransitioncancel
例
スタイルシート（transition 使用）でアニメーション

HTML： 

<SPAN id=IdTest style="
  position:relative;
  left:0; font-size:30px;
  transition:all 5s 2s;
 ">■</SPAN><BR>
<SPAN id=IdLog></SPAN><BR>

JavaScript： 

function JobS(eve){ //transitionstart イベントの処理。
  IdLog.innerHTML=IdLog.innerHTML+"Start "; //表示。
}
function JobR(eve){ //transitionrun イベントの処理。
  IdLog.innerHTML=IdLog.innerHTML+"Run "; //表示。
}
function JobE(eve){ //transitionend イベントの処理。
  IdLog.innerHTML=IdLog.innerHTML+"End "; //表示。
}
function JobC(eve){ //transitioncancel イベントの処理。
  DA=eve;
  IdLog.innerHTML=IdLog.innerHTML+"Can "; //表示。
}
document.ontransitionstart=JobS; //イベント割り当て。
document.ontransitionrun=JobR;   //イベント割り当て。
document.ontransitionend=JobE;   //イベント割り当て。
document.ontransitioncancel=JobC;   //イベント割り当て。
IdTest.style.left="200px";    //水平軸 100px 移動。
IdTest.style.fontSize="10px"; //フォントサイズを 10px へ。

IdTest.style.fontSize="40px"; //キャンセル操作？
//IdTest.style.transition="";

とにかくプロパティを変更すればキャンセル イベントが発生するようです。

IdTest.style.transition="" を実行すると完全にキャンセルになるようです。

→CSS：transition プロパティ

テスト