JS не запускает css анимацию

Question

при первом нажатии кнопки работает анимация затухания (изменение непрозрачности). Но для следующих всех кликов это больше не работает. Когда я делаю отладку, это показывает, что работает каждый раз. Но на самом деле, почему нет?

let colorArray = ['red','yellow','green','teal']
let index = 0

function imageChanger(){
    document.querySelector('.container').id = ''
    if(index == colorArray.length-1) index = 0
    else index++
    document.querySelector('.container').style.backgroundColor = colorArray[index]
    document.querySelector('.container').id = 'fade'
}

.container{
    height: 300px;
    max-width: 400px;
    background-color:  teal;
    
}
#fade{
    animation: fade 5s;
}
@keyframes fade{
    from{opacity:.4 }
    to{opacity: 1}
}

<button onclick="imageChanger()">Change</button>
<div class="container" id=""></div>

Answer 1

Как только вы добавили идентификатор fade, запустите анимацию и больше не повторяйте.

Вы должны каждый раз удалять его и добавлять снова. используя setTimeout, чтобы дать css время, чтобы найти его удаленным.

Также я рекомендую использовать класс вместо идентификатора и использовать переход вместо ключевого кадра

let colorArray = ['red','yellow','green','teal']
let index = 0

function imageChanger(){
    document.querySelector('.container').id = ''
    if(index == colorArray.length-1) index = 0
    else index++
    document.querySelector('.container').style.backgroundColor = colorArray[index]
    document.querySelector('.container').classList.remove('fade')
    setTimeout( function(){    document.querySelector('.container').classList.add('fade')
}, 50);
}

.container{
    height: 300px;
    max-width: 400px;
    background-color:  teal;
    opacity: .2;
    transition: opacity 0s linear;
}
.container.fade{
    transition: opacity 3s linear;
    opacity: 1;
}

<button onclick="imageChanger()">Change</button>
<div class="container fade"></div>

Answer 2

Я бы в основном согласился с приведенным выше ответом. Просто хочу отметить, что если вы хотите, чтобы первый блок teal отображался как teal, а не непрозрачный для начала, вам необходимо включить класс fade в начальные значения html.

Также, если вы хотите При первом переходе в красный цвет следует начинать с позиции индекса -1, а не 0.

<button onclick="imageChanger()">Change</button>
<div class="container fade" id=""></div>

let index = -1;