CSS3の時代には、CSS3アニメーションが可能です。
従来のJSは、コールバック関数を介してアニメーションが終了するかどうかを判断できます。 CSSテクノロジーを使用してアニメーション効果を生成したとしても、JavaScriptはアニメーションまたは変換の終了イベントを引き続きキャプチャできます。
TransitionEndイベントおよびアニメーションイベント標準ブラウザイベントですが、WebKitブラウザではWebKitプレフィックスを使用する必要があるため、さまざまなブラウザに従ってイベントを個別に検出する必要があります。
コードコピーは次のとおりです。
var transitions = {
「トランジション」：「トランジションエンド」、
'Otransition'： 'otransitionEnd'、
「MozTransition」：「TransitionEnd」、
「WebKittransition」：「WebKitTransitionEnd」
}
ソースコードは以下に添付されています。
コードコピーは次のとおりです。
<！doctype html>
<html>
<head>
<メタcharset = "utf-8">
<Title> Susface JSは、CSSアニメーションが終了するかどうかを決定します</title>
</head>
<body>
<p>アニメーションまたは変換が終了するとすぐに、コールバック関数が起動されます。大規模なクラスライブラリサポートは不要です。 <br> </p>
<style type = "text/css">
.sample {
幅：200px;
高さ：200px;
ボーダー：1pxソリッドグリーン。
背景：lightgreen;
不透明：1;
マージンボトム：20px;
Transition-Property：不透明。
/*遷移期間：.5s;*/
遷移期間：3秒;
}
.sample.hide {
不透明：0;
}
</style>
<div> css3アニメーションはあまりにも過度に非表示です（遷移期間：3s;）</div>
<p> <button onclick = "this.style.display = 'none'; startfade（）;">ゆっくりとフェードし、検出エンドイベント</button> </p>
<スクリプト>
（関数（） {
var e = document.getElementsByClassName（ 'sample'）[0];
function whus transitionEvent（）{
var t;
var el = document.createelement（ 'fakeElement'）;
var transitions = {
「トランジション」：「トランジションエンド」、
'Otransition'： 'otransitionEnd'、
「MozTransition」：「TransitionEnd」、
「WebKittransition」：「WebKitTransitionEnd」
}
（transitionsのt）{
if（el.style [t]！== undefined）{
runter transitions [t];
}
}
}
var transitionevent = whithtransitionevent（）;
TransitionEvent && E.AddeventListener（TransitionEvent、function（）{
Alert（ 'CSS3の動きは終了します！私はコールバック関数であり、サードパーティのクラスライブラリは使用されていません！'）;
}）;
startfade = function（）{
e.classname+= 'hide';
}
}）（）; <br> </script>
</body>
</html>
上記は、CSS3アニメーションの終わりを判断するためのJavaScriptに関するこの記事で説明されている方法です。みんなが気に入ってくれることを願っています