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

除此之外，重要的是要注意，如果您在函数中删除和添加相同的类，由于浏览器的工作方式，什么都不会发生。为了让浏览器识别所做的任何更改，必须重新绘制页面 (here is a list of what makes that happen)。为了强制页面重绘，我选择使用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>