Actualmente estoy trabajando en una animación en la que hay un retraso entre cada uno de los íconos cuando se desvanece. La animación de desvanecimiento funciona bien, pero solo en el primer ícono y no estoy seguro de por qué es así. ¿Alguien podría señalar el error que estoy cometiendo?
Código JavaScript:
function closeHorizontalWindow() { const delay = 150; const reasons = ['btnReady', 'btnNotReady', 'btnBreak', 'btnEmail', 'btnLunch', 'btnComfortBreak', 'btnMeeting', 'btnChat'] for (let i = 0; i < reasons.length; i++) { document.getElementById(reasons[i]).style.animation = `reasonsfadeout 0.45s ease-out forwards ${delay}ms` delay+=150 }Código CSS:
@keyframes reasonsfadeout { from{opacity: 1; } to {opacity: 0; } }}
Gracias
Puede usar un intervalo para iterar en lugar de un bucle for regular.
function closeHorizontalWindow() { const delay = 150; const reasons = ['btnReady', 'btnNotReady', 'btnBreak', 'btnEmail', 'btnLunch', 'btnComfortBreak', 'btnMeeting', 'btnChat'] let i = 0; const interval = setInterval(function(){ document.getElementById(reasons[i]).style.animation = `reasonsfadeout 0.45s ease-out forwards ${delay}ms`; i++; if(i>=reasons.length){ clearInterval(interval); } }, delay); }