Problema de intervalo JS e Animate.css
-
21-12-2019 - |
Pergunta
Estou usando animate.css para um feed.Eu tenho uma div chamada feed que usa a classe slideInLeft, permanece por 3 segundos e depois usa a classe fadeOut.Neste ponto, preciso alterar o conteúdo da div e começar de novo.Aqui está o que eu tenho:
HTML:
<div id="feed"></div>
JS:
var myCars=new Array("Saab","Volvo","BMW");
var wIndex = 0;
$('#feed').text(myCars[wIndex]);
setInterval(function () {
++wIndex;
if (wIndex >= myCars.length) {
wIndex = 0;
}
$('#feed').removeClass('animated slideInLeft');
$('#feed').addClass('animated fadeOut').addClass('hidden');
$('#feed').text(myCars[wIndex]);
$('#feed').removeClass('animated fadeOut').removeClass('hidden');
$('#feed').addClass('animated slideInLeft');
}, 3000);
http://jsfiddle.net/tjfo/5a3SL/
A mudança inicial do primeiro elemento da matriz para o segundo funciona corretamente, desaparece e desliza para dentro.Todas as transições a seguir apenas alteram o texto no div sem desaparecer e deslizar para dentro.Animate.css é o método preferido para concluir esta tarefa.Alguém pode ajudar a descobrir como fazê-lo funcionar corretamente?
Obrigado!
Solução
Acho que você está querendo remover o animated
e slideInLeft
aulas antes de aplicar as aulas subsequentes.Talvez remova essas classes imediatamente e, em seguida, em um tempo limite, digamos, 25ms
, faça o resto da lógica.
Aqui está uma demonstração: http://jsfiddle.net/5a3SL/3.
Ao animar com CSS, isso é bastante comum, pois você precisa dar tempo ao navegador para calcular o novo layout sem essas classes antes de aplicar novas classes, caso contrário, o estado correto não existirá no layout para que a nova classe seja animada corretamente.
Além disso, honestamente parece muito CSS para uma animação simples...a coisa mais complicada sobre animações é ter que reescrever suas declarações CSS para quatro prefixos de fornecedores diferentes, bem como a declaração padrão.
Outra maneira de lidar com isso seria definir um tempo limite no final do loop que seja pelo menos tão longo quanto a animação (o slide-in) e remover as classes desnecessárias.