为什么这个褪色的幻灯片动画不能完全工作?

Question

我无法让这个幻灯片在每个图像中都正常工作。

经过几个小时的调整，我得出结论，这个问题与时间和所有元素的类同时交换有关，但我找不到解决问题的方法。

let slideIndexPrev = 1;
let slideIndexCurr = 0;
showSlides();
function showSlides() {
let slides = document.getElementsByClassName("mySlides");

if (slideIndexPrev >= slides.length) {slideIndexPrev = 0}
if (slideIndexCurr >= slides.length) {slideIndexCurr = 0}

slides[slideIndexCurr].classList.add("fade-in");
slides[slideIndexCurr].classList.remove("fade-out");
slides[slideIndexPrev].classList.add("fade-out");
slides[slideIndexPrev].classList.remove("fade-in");

slideIndexPrev++;
slideIndexCurr++;
setTimeout(showSlides, 3000); // Change image every X seconds
}

* {box-sizing:border-box}
/* Slideshow container */
.slideshow-container {
display: flex;
position: relative;
min-width: 100%;
min-height: 250px;
border-bottom: 2px solid #333;
}
.mySlides img {
display: flex;
position: absolute;
width: 100%; 
height: 100%; 
object-fit: cover;
}
/* Fading animation */
.fade-in {
animation-name: fade-in;
animation-duration: 2s;
}
.fade-out {
animation-name: fade-out;
animation-duration: 2s;
}
@keyframes fade-in {
from {opacity: 0}
to   {opacity: 1}
}

@keyframes fade-out {
from {opacity: 1}
to   {opacity: 0}
}

<!-- Slideshow container -->
<div class="slideshow-container">
<!-- Full-width images -->
<div class="mySlides">
<img src="https://ca-   times.brightspotcdn.com/dims4/default/f652f70/2147483647/strip/true/crop/5389x3153+0+0/resize/1486x869!/quality/90/?url=https%3A%2F%2Fcalifornia-times-brightspot.s3.amazonaws.com%2Fa9%2F5b%2Fc621f3bc408e95c16b4538d87578%2Fla-photos-1staff-amazonstudios-210802a.jpg" 
style="object-position: 50% 40%;">
</div>
<div class="mySlides">
<img src="https://i.pinimg.com/originals/c5/6b/d1/c56bd1d016ccd315aa9e8d3ec3c78bb7.png" 
style="object-position: 50% 47%;">        
</div>
<div class="mySlides">
<img src="https://wallpaperaccess.com/full/3203467.jpg" 
style="object-position: 50% 51%;">
</div>

提前感谢您提供的任何帮助!

Answer 1

1. 您目前有两个fade-in元素和一个fade-out元素-查看控制台。所以你可能想把这些在js中替换成这样:

slides[slideIndexCurr].classList.add("fade-out");
slides[slideIndexCurr].classList.remove("fade-in");
slides[slideIndexPrev].classList.add("fade-in");
slides[slideIndexPrev].classList.remove("fade-out");

2. 动画结束后，不透明度恢复为1。所以它消失了，然后突然重新出现。只需将opacity: 0;添加到fade-out类中。

见笔:https://codepen.io/rajniszp/pen/RwQpmZR

如果我有帮助，欢迎投票:D