このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

ontransitionend”イベントハンドラHTML Living Standardで定義

記事Sep. 1st,2021
CSSの遷移効果が終了した時に発生するイベント
この記事はHTML Living Standardに対応しています。
この記事はHTML Living Standardに対応しています。

ontransitionend”イベントハンドラ

イベント名 transitionend”イベント
インターフェース TransitionEvent”インターフェース
バブリング Yes
キャンセル No

ontransitionend”イベントハンドラはCSSのtransition”プロパティなどによる遷移効果が終了した時に発生する“transitionend”イベントを処理するためのイベントハンドラです。

transitionend”イベントは遷移効果が途中で中止されずに最後まで終了した時に発生します。

ontransitionend”イベントハンドラはすべてのHTMLの要素でコンテント属性とIDL属性として使用できます。また、すべての“Document”オブジェクトと“Window”オブジェクトでIDL属性として使用できます。

別名として“webkit”の接頭辞がある“onwebkittransitionend”が使用でき、“HTML Living Standard”の仕様書にはこの名前で記載されています。

サンプルコード

IDL属性

var count = 0;
document.getElementById("sampleElement").ontransitionend = function() {
count++;
document.getElementById("counter").innerHTML = count;
};
.box {
transform: scale(1.5);
transition: 2s;
}
<div id="sampleElement">♪</div>

<p>イベントの発生回数:<output id="counter">0</output>回</p>

イベントの発生回数:0

コンテント属性

var count = 0;
function counter(){
count++;
document.getElementById("counterCont").innerHTML = count;
};
.box {
transform: scale(1.5);
transition: 2s;
}
<div ontransitionend="counter();">♪</div>

<p>イベントの発生回数:<output id="counter">0</output>回</p>

イベントの発生回数:0

一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク