À l'ère de CSS3, l'animation CSS3 est possible;
JS traditionnel peut déterminer si l'animation se termine à travers les fonctions de rappel; Même si la technologie CSS est utilisée pour générer des effets d'animation, JavaScript peut toujours capturer l'événement final d'animation ou de transformation;
Événements d'événement TransitionEnd et événements de navigateur standard de l'événement AnimationEnd, mais dans le navigateur WebKit, vous devez toujours utiliser le préfixe WebKit, nous devons donc détecter les événements séparément selon divers navigateurs
La copie de code est la suivante:
Var Transitions = {
«transition»: «transitionend»,
«Otransition»: «otransitionend»,
«Moztransition»: «transitionend»,
«Webkittransition»: «webkittransitionend»
}
Le code source est joint ci-dessous:
La copie de code est la suivante:
<! doctype html>
<html>
<adal>
<meta charset = "utf-8">
<Title> Suface JS détermine si l'animation CSS se termine </TITAL>
</ head>
<body>
<p> Dès que l'animation ou la transformation est terminée, la fonction de rappel sera tirée. Le support de bibliothèque de grandes classes n'est plus nécessaire. <br> </p>
<style type = "text / css">
.échantillon {
Largeur: 200px;
hauteur: 200px;
Border: 1px vert massif;
Contexte: LightGreen;
Opacité: 1;
marge-fond: 20px;
PROPERTY DE TRANSITION: OPACITÉ;
/ * Durée de transition: .5S; * /
Durée de transition: 3S;
}
.sample.hide {
Opacité: 0;
}
</ style>
<v> L'animation CSS3 est trop trop cachée (durée de transition: 3s;) </div>
<p> <bouton onclick = "this.style.display = 'None'; startFade ();"> Fade lentement, événement de fin de détection </fruts> </p>
<cript>
(fonction() {
var e = document.getElementsByClassName ('échantillon') [0];
fonction whatTransitionEvent () {
var t;
var el = document.CreateElement ('FakeElement');
Var Transitions = {
«transition»: «transitionend»,
«Otransition»: «otransitionend»,
«Moztransition»: «transitionend»,
«Webkittransition»: «webkittransitionend»
}
pour (t en transitions) {
if (el.style [t]! == Undefined) {
transitions de retour [t];
}
}
}
var transitionEvent = whatTransitionEvent ();
transitionEvent && e.AddeventListener (transitionEvent, function () {
Alert ('Le mouvement CSS3 se termine! Je suis une fonction de rappel, aucune bibliothèque de classe tierce n'est utilisée!');
});
startFade = function () {
e.className + = 'Hide';
}
}) (); <br> </ script>
</docy>
</html>
Ce qui précède est la méthode décrite dans cet article sur JavaScript pour juger de la fin de l'animation CSS3. J'espère que tout le monde aime ça