Na era do CSS3, é possível a animação CSS3;
O JS tradicional pode determinar se a animação termina através das funções de retorno de chamada; Mesmo que a tecnologia CSS seja usada para gerar efeitos de animação, o JavaScript ainda pode capturar o evento final de animação ou transformação;
Transiceend Event e Animationend Event Standard Browser Events, mas no navegador do Webkit você ainda precisa usar o prefixo do WebKit, por isso temos que detectar eventos separadamente de acordo com vários navegadores
A cópia do código é a seguinte:
var transitions = {
'transição': 'transiceend',
'Otransition': 'otransitionend',
'Moztransition': 'transiceend',
'Webkittransition': 'webkittransitionend'
}
O código -fonte está anexado abaixo:
A cópia do código é a seguinte:
<! doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> Suface JS determina se a animação CSS termina </title>
</head>
<Body>
<p> Assim que a animação ou transformação for concluída, a função de retorno de chamada será disparada. O suporte à biblioteca de classe grande não é mais necessário. <br> </p>
<style type = "text/css">
.amostra {
Largura: 200px;
Altura: 200px;
borda: 1px verde sólido;
Antecedentes: Lightgreen;
opacidade: 1;
Margin-Bottom: 20px;
Propriedade de transição: opacidade;
/*duração da transição: .5s;*/
Duração da transição: 3s;
}
.sample.hide {
opacidade: 0;
}
</style>
<div> A animação CSS3 está excessivamente oculta (duração da transição: 3s;) </div>
<p> <button onclick = "this.style.display = 'none'; startfade ();"> desaparece lentamente, eventos finais de detecção </botão> </p>
<Cript>
(function () {
var e = document.getElementsByClassName ('amostra') [0];
função qualTransitionEvent () {
var t;
var el = document.createElement ('falsoElement');
var transitions = {
'transição': 'transiceend',
'Otransition': 'otransitionend',
'Moztransition': 'transiceend',
'Webkittransition': 'webkittransitionend'
}
para (t em transições) {
if (el.style [t]! == indefinido) {
transições de retorno [T];
}
}
}
var transitionEvent = whatransitionEvent ();
transitionEvent && e.addeventListener (transitionEvent, function () {
alerta ('o movimento CSS3 termina! Sou uma função de retorno de chamada, nenhuma biblioteca de classes de terceiros é usada!');
});
startfade = function () {
e.className+= 'hide';
}
}) (); <br> </script>
</body>
</html>
O exposto acima é o método descrito neste artigo sobre JavaScript para julgar o fim da animação CSS3. Espero que todos gostem