DOM

：

：

Document：transitionstart イベント

　編集：2022.10.11 by T.A.

[Edge]。実験的。→、

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

このイベントは、CSS トランジションが実際に始まったとき、すなわち transition-delay が終了した後に発行されます。

transitionstart と transitionrun の違いは、transitionrun がトランジションが生成されたとき（すなわち、待ち時間の開始）に発生するのに対し、transitionstart は実際にアニメーションが始まったとき（すなわち、待ち時間の終了）に発生することです。

バブリング あり
キャンセル可能 いいえ
インターフェイス TransitionEvent
イベント ハンドラー プロパティ ontransitionstart

このイベントの本来の対象は、トランジションが適用された Element です。このイベントを Document インターフェイス上で待ち受けし、キャプチャやバブリングの局面で処理することができます。このイベントについて完全な詳細は、HTMLElement：transitionstart イベントを参照してください。

例
スタイルシート（animation 使用）でアニメーション

以下のCSSが組み込んであります： 


 
JavaScript：まず、こちらを組み込んでください。
 
function Job(eve){ //transitionstart イベントの処理。
  D=eve;
  IdLog.innerHTML=IdLog.innerHTML+"●"; //表示。
}
//document.ontransitionstart=Job;
document.addEventListener('transitionstart', Job); //イベント割り当て。


 
HTML：
 
スクリプトを組み込んでからHTMLを組み込んでください。<BR>
<SPAN id=IdLog></SPAN><BR>
<DIV id=IdTest style="width:1em;
  animation:3s linear 5s TestKF;
">■</DIV>


 
イベントが発生しない。




スタイルシート（transition 使用）でアニメーション



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


 
JavaScript：
 
function Job(eve){ //transitionstart イベントの処理。
  D=eve;
  IdLog.innerHTML=IdLog.innerHTML+"●"; //表示。
}
document.ontransitionstart=Job;
IdTest.style.left="100px";
IdTest.style.fontSize="10px";


 
イベントが起きた。プロパティの2つを変化させている為か、2つ発生した。









テスト