Удаление класса из элемента не вызывает анимацию CSS

Question

Я создаю эффект карусели (слайд-шоу) для моего сайта, и у меня мало проблем.При каждом изменении изображения я хочу сделать эффект затухания.Поэтому я добавил класс с анимацией для него.И тут возникает проблема.

Эта функция срабатывает каждые 3 секунды (setInterval)

let sliderInterval = setInterval(nextImg, 3000);

function nextImg() {
    imgChange(sliderNum + 1);
}

const heroImg = document.querySelector('.hero__image');

function imgChange(x) {
    heroImg.classList.remove("fade");
    sliderNum = (x + imgLocations.length) % imgLocations.length;
    heroImg.src = imgLocations[sliderNum];
    heroImg.classList.add("fade");
}

Эффект затухания:

.fade {
    animation: fade 1.5s ease-in-out;
}

@keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
}

<div class="hero">
<img class="hero__image" src="photo1">
</div>

Работает только при первом переключении изображения.Хотя в начале функции он удалит класс fade Я вижу в функции, что он остается там в элементе и не исчезнет.Не имеет значения, пытаюсь ли я наложить эффект на секцию hero или img внутри нее.

Answer 1

Проблема в том, что анимации CSS с ключевыми кадрами будут по умолчанию только запускаться один раз .Можно изменить количество раз, которое они запускают, но это будет запускать их постоянно в цикле, что нежелательно.

Вместо этого необходимо выполнить сброс анимации.Для этого элементу необходимо удалить имя анимации (в данном случае fade).Это можно сделать с помощью animation-name: none;, однако правило должно быть помещено в элемент при удалении fade.Обратите внимание на изменение в селекторе, чтобы имя анимации затухания имело приоритет при применении.

Кроме того, важно отметить, что если вы удалите и добавите тот же класс в функцию, из-за способачто браузеры работают, ничего не произойдет.Чтобы браузер распознал любые сделанные изменения, должна произойти перерисовка страницы ( вот список того, что делает ).Чтобы заставить страницу перерисовываться, я решил использовать offsetHeight, поэтому вы видите heroImg.offsetHeight, использованный в коде (обратите внимание, что его нужно только прочитать, его не нужно использовать или назначать).

Я высмеял ваше изображение с div для удобства.

let sliderInterval = setInterval(imgChange, 3000);

const heroImg = document.querySelector('.imgMock');

function imgChange() {
    heroImg.classList.remove("fade");
    heroImg.offsetHeight; // force repaint to recognize `animation-name: none;`
    heroImg.classList.add("fade");
}

.imgMock.fade {
    animation: fade 1.5s ease-in;
}

@keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
}

.imgMock {
    height:50px;
    width:50px;
    background-color:black;
    animation-name: none;
}

<div class="hero">
 <div class="imgMock"></div>
</div>