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>

仅适用于第一次图像切换。在函数开头的Altough它将删除我在函数中看到的类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>

从元素中删除类不会触发css动画

1 个答案: