CSS 动画仅显示在第一张幻灯片图像上答案

【问题标题】：CSS animation only display on first slide imageCSS 动画仅显示在第一张幻灯片图像上
【发布时间】：2022-01-01 19:21:12
【问题描述】：

我想在 css 中制作一些带有淡入淡出效果的幻灯片。一切正常，使用 setInterval javascript 方法在 3 秒内显示图像，但仅使用淡入动画显示第一张图像。

.slide {
  position: absolute;
  height: 100vh;
  width: 66vw;
  animation: fadeIn 1s;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

&lt;img class="slide" src="https://static.vecteezy.com/packs/media/components/global/search-explore-nav/img/vectors/term-bg-1-666de2d941529c25aa511dc18d727160.jpg"&gt;

HTML 中只添加了一个 jpg，并且编写了 javascript 代码来替换文件路径

 <img class="slide" src="1.JPG">

转“2.jpg”、“3.jpg”等

只有第一张图片有动画，后面显示的都是没有动画的。

当我检查控制台时，所有下一个图像仍然具有 .slide 类及其所有属性位置/宽度/高度/动画，但它们显示时没有动画。

有什么想法吗？

【问题讨论】：

我给你做了一个sn-p。请将其更新为minimal reproducible example
由于您只是更改了img 的属性（即src），而不是替换元素本身，因此动画不会再次运行。
无法加载我的 js 代码，出了点问题。对不起mplungjan，我下次发帖前会尝试练习。并感谢 FZ 的回复，我会尝试将所有图像添加到 html 然后替换整个元素。

标签： javascript html css animation

【解决方案1】：

基本上每次更改src时都需要触发css动画。您可以通过删除元素类、触发 DOM 重排并再次添加该类来实现。但是你应该小心，因为触发回流可能是一项昂贵的操作。阅读更多关于它的信息here。

const images = [
  "https://via.placeholder.com/300?text=image1",
  "https://via.placeholder.com/300?text=image2",
  "https://via.placeholder.com/300?text=image3",
];

const img = document.querySelector(".slide");

let imageIndex = 0;
const imageInterval = setInterval(() => {
  imageIndex++;
  if (imageIndex >= images.length) {
    clearInterval(imageInterval);
  } else {
    img.src = images[imageIndex];

    img.classList.remove("slide");
    void img.offsetWidth; // trigger a DOM reflow
    img.classList.add("slide");
  }
}, 3000);

.slide {
  position: absolute;
  height: 100vh;
  width: 66vw;
  animation: fadeIn 1s;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

&lt;img class="slide" src="https://via.placeholder.com/300?text=image1"&gt;

【讨论】：

是的，这正是我想要的。非常感谢您的回复，将尝试弄乱代码并使其正常工作
@sasax 很高兴它有帮助，如果需要，您也可以将其标记为已回答。

【解决方案2】：

很难说出你到底想要什么，但使用纯 CSS 可能是这样的

.slide {
  position: absolute;
  opacity: 0;
  height: 100vh;
  width: 66vw;
  animation: fadeIn 1s forwards;
}
.two {
  animation-delay: 3s;
}
.three {
  animation-delay: 6s;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<img class="slide" src="https://static.vecteezy.com/packs/media/components/global/search-explore-nav/img/vectors/term-bg-1-666de2d941529c25aa511dc18d727160.jpg">
<img class="slide two" src="https://compote.slate.com/images/f063a07e-e5ab-4e04-8093-281d0a28ebe8.jpeg">
<img class="slide three" src="https://i.ytimg.com/vi/nWLUdoK5fSs/maxresdefault.jpg">

【讨论】：

这正是我想要的！但我的代码只显示第一个带有动画的图像。会尝试你的方式，非常感谢