Sep. 1st,2021
＃
“ontransitionrun”イベントハンドラ
| イベント名 | “transitionrun”イベント |
| インターフェース | “TransitionEvent”インターフェース |
| バブリング | Yes |
| キャンセル | No |
“ontransitionrun”イベントハンドラはCSSの“transition”プロパティなどによる遷移効果が生成された時に発生する“transitionrun”イベントを処理するためのイベントハンドラです。
“transition-delay”プロパティによる遅延時間の開始時に発生します。遅延時間がない場合は“transitionrun”イベントと遷移効果が開始された時に発生する“transitionstart”イベントがどちらも発生します。
“ontransitionrun”イベントハンドラはすべてのHTMLの要素でコンテント属性とIDL属性として使用できます。また、すべての“Document”オブジェクトと“Window”オブジェクトでIDL属性として使用できます。
＃
サンプルコード
IDL属性
var count = 0;
document.getElementById("sampleElement").ontransitionrun = function() {
count++;
document.getElementById("counterNumber").innerHTML = count;
};
#sampleElement:hover {
transform: scale(1.5);
transition-duration: 2s;
transition-delay: 2s;
}
<div id="sampleElement">♪</div>
<p>イベントの発生回数：<output id="counterNumber">0</output>回</p>
♪
イベントの発生回数：回
コンテント属性
var count = 0;
function counter(){
count++;
document.getElementById("counterNumber").innerHTML = count;
};
.box:hover {
transform: scale(1.5);
transition-duration: 2s;
transition-delay: 2s;
}
<div class="box" ontransitionrun="counter();">♪</div>
<p>イベントの発生回数：<output id="counterNumber">0</output>回</p>
♪
イベントの発生回数：回
＃
