In der Zeit von CSS3 ist CSS3-Animation möglich;
Traditionelle JS kann bestimmen, ob die Animation durch Rückruffunktionen endet. Auch wenn die CSS -Technologie zur Generierung von Animationseffekten verwendet wird, kann JavaScript dennoch das End -Ereignis von Animation oder Transformation erfassen.
Übergangs -Ereignis- und Animationend -Ereignis -Standard -Browser -Ereignisse, aber im Webkit -Browser müssen Sie weiterhin das Webkit -Präfix verwenden. Daher müssen wir Ereignisse separat nach verschiedenen Browsern erkennen
Die Codekopie lautet wie folgt:
var transitionss = {
"Übergang": "Übergangs",
'Otransition': 'otransitionend',,
'Moztransition': 'Transitionend',,
'Webkittransition': 'Webkittransitionend' '
}
Der Quellcode ist unten beigefügt:
Die Codekopie lautet wie folgt:
<! docType html>
<html>
<kopf>
<meta charset = "utf-8">
<title> Suphefy JS bestimmt, ob die CSS -Animation </title> endet
</head>
<body>
<p> Sobald die Animation oder Transformation beendet ist, wird die Rückruffunktion abgefeuert. Es wird nicht mehr Unterstützung für die Bibliotheksunterstützung der Klassenbibliothek benötigt. <br> </p>
<style type = "text/css">
.Probe {
Breite: 200px;
Höhe: 200px;
Grenze: 1PX Solid Green;
Hintergrund: LightGreen;
Deckkraft: 1;
Randboden: 20px;
Übergangs-Property: Deckkraft;
/*Übergangsdauer: .5s;*/
Übergangsdauer: 3s;
}
.Sample.hide {
Deckkraft: 0;
}
</style>
<div> css3 Animation ist zu übermäßig verborgen (Übergangsdauer: 3s;) </div>
<p> <button onclick = "this.style.display = 'none'; startfade ();"> Langsam verblasst, Erkennungsende Ereignis </button> </p>
<Script>
(function () {
var e = document.getElementsByClassName ('sample') [0];
Funktion thattransitionEvent () {
var t;
var el = document.createelement ('fakeElement');
var transitionss = {
"Übergang": "Übergangs",
'Otransition': 'otransitionend',,
'Moztransition': 'Transitionend',,
'Webkittransition': 'Webkittransitionend' '
}
für (t im Übergang) {
if (El.Style [t]! == undefined) {
Returnübergänge [t];
}
}
}
var transitionEvent = theTransitionEvent ();
transitionEvent && e.addeventListener (transitionEvent, function () {
Alert ('CSS3-Bewegung endet! Ich bin eine Rückruffunktion, keine Klassenbibliothek von Drittanbietern!');
});
startfade = function () {
E. ClassName+= 'Hide';
}
}) (); <br> </script>
</body>
</html>
Die obige Methode ist die in diesem Artikel über JavaScript beschriebene Methode, um das Ende der CSS3 -Animation zu beurteilen. Ich hoffe es mag es, es mag es