im currently working on an animation where there's a delay between each of the icons when fading out. The fade out animation works fine, but only on the first icon and im unsure on why this is. Could some one maybe point out the mistake im making?
Javascript code:
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
}
CSS code:
@keyframes reasonsfadeout
{
from{opacity: 1; }
to {opacity: 0; }
}
}
Thankyou
You can use an interval to iterate instead of a regular for-loop.
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);
}