En la era de CSS3, la animación CSS3 es posible;
JS tradicional puede determinar si la animación termina a través de funciones de devolución de llamada; Incluso si la tecnología CSS se utiliza para generar efectos de animación, JavaScript aún puede capturar el evento final de animación o transformación;
Eventos de transición de eventos y animación en transición Eventos de navegador estándar, pero en WebKit Browser aún necesita usar el prefijo WebKit, por lo que tenemos que detectar eventos por separado de acuerdo con varios navegadores
La copia del código es la siguiente:
transitions var = {
'Transición': 'Transitionend',
'OTransition': 'oTransitionend',
'Moztransition': 'Transitionend',
'WebKitTransition': 'WebKitTransitionend'
}
El código fuente se adjunta a continuación:
La copia del código es la siguiente:
<! Doctype html>
<html>
<Evista>
<meta charset = "utf-8">
<title> Suface JS determina si la animación CSS termina </title>
</ablo>
<Body>
<p> Tan pronto como se termine la animación o la transformación, se disparará la función de devolución de llamada. Ya no se necesita soporte de biblioteca de clase grande. <br> </p>
<style type = "text/css">
.muestra {
Ancho: 200px;
Altura: 200px;
borde: 1px verde sólido;
Antecedentes: Lightgreen;
Opacidad: 1;
margen-fondo: 20px;
Propiedad de transición: opacidad;
/*Duración de transición: .5s;*/
Duración de transición: 3s;
}
.sample.porto {
Opacidad: 0;
}
</style>
<Viv> La animación CSS3 está demasiado oculta (Duración de transición: 3s;) </div>
<P> <Button onClick = "this.style.display = 'None'; startFade ();"> Fades lentamente, detección final del evento </boton> </p>
<script>
(función() {
var e = document.getElementsByClassName ('sample') [0];
función whattransitionEvent () {
var t;
var el = document.createElement ('falseElement');
transitions var = {
'Transición': 'Transitionend',
'OTransition': 'oTransitionend',
'Moztransition': 'Transitionend',
'WebKitTransition': 'WebKitTransitionend'
}
para (t en transiciones) {
if (el.style [t]! == Undefined) {
Transiciones de retorno [t];
}
}
}
var transitionEvent = WhonTransitionEvent ();
TransitionEvent && E.AdDeventListener (TransitionEvent, function () {
Alert ('El movimiento CSS3 termina! Soy una función de devolución de llamada, ¡no se usa una biblioteca de clase de terceros!');
});
startFade = function () {
e.classname+= 'escondite';
}
}) (); <br> </script>
</body>
</html>
Lo anterior es el método descrito en este artículo sobre JavaScript para juzgar el final de la animación CSS3. Espero que a todos les guste