从元素中删除类不会触发 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请注意对选择器的更改，以使淡入淡出动画名称在应用时优先。

最重要的是，需要注意的是，如果您在函数中删除和添加相同的类，由于浏览器的工作方式，什么都不会发生。为了让浏览器识别所做的任何更改，必须进行页面重新绘制（这里列出了导致这种情况发生的原因）。为了强制页面重绘，我选择了 use offsetHeight，这就是为什么你会heroImg.offsetHeight在代码中看到used（注意它只需要读取，不必使用或赋值）。

为了方便起见，我用 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>