如何在 for 循环中对菜单中的每个图标应用淡出 animation

Question

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

Answer 1

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);
}