CSS淡入淡出延迟？

Question

我正在尝试为我的网站创建一个幻灯片横幅，我的想法是使用 z-index 将它们堆叠起来，然后让顶部的淡出以显示下面的那个，然后将其自身移动到底部堆栈。

我不完全理解 CSS 淡入淡出规则是如何工作的，它们似乎是同时淡出堆栈中的所有图像，而不仅仅是顶部的图像。有没有一种优雅的方法可以使淡入淡出 class 跟随堆栈的顶部图像，以便它仅在顶部时淡出？

如有任何帮助，我们将不胜感激...

var slidePosition = 0;
fadeSlides();


function fadeSlides() {
  var i;
  var slide = document.getElementsByClassName("mySlides");
  for (i = 0; i < slide.length; i++) {
    slide[i].style.zIndex = slide[i].style.zIndex + 1;
    slide[i].style.opacity = "1";
  }
  slidePosition++;
  if (slidePosition > slide.length) {
    slidePosition = 1
  }
  slide[slidePosition - 1].style.opacity = "0";
  slide[slidePosition - 1].style.zIndex = "0";
  setTimeout(fadeSlides, 3500);

}

.slideshow-container {
  width: 100%;
  position: relative;
}

.mySlides {
  opacity: 1;
  position: absolute;
}

.fade {
  animation: fade 1s infinite;
}

@keyframes fade {
  0% {
    opacity: 1
  }
  100% {
    opacity: 0
  }
}

<div class="slideshow-container">

  <div class="mySlides fade" style="z-index: 5">
    <img src="https://i.imgur.com/h9HMwvD.png" style="width:100%">
  </div>

  <div class="mySlides fade" style="z-index: 4">
    <img src="https://i.imgur.com/inAYNo3.png" style="width:100%">
  </div>

  <div class="mySlides fade" style="z-index: 3">
    <img src="https://i.imgur.com/8VHulyg.png" style="width:100%">
  </div>

  <div class="mySlides fade" style="z-index: 2">
    <img src="https://i.imgur.com/wZzx8GU.png" style="width:100%">
  </div>

  <div class="mySlides fade" style="z-index: 1">
    <img src="https://i.imgur.com/ZPO4z3V.png" style="width:100%">
  </div>

  <div class="mySlides fade" style="z-index: 0">
    <img src="https://i.imgur.com/yhuKaY8.png" style="width:100%">
  </div>

</div>

Answer 1

只需使用 transition 因为不需要使用 animation 因为您正在使用 JS

更改属性

var slidePosition = 0;
fadeSlides();


function fadeSlides() {
  var i;
  var slide = document.getElementsByClassName("mySlides");
  for (i = 0; i < slide.length; i++) {
    slide[i].style.zIndex = slide[i].style.zIndex + 1;
    slide[i].style.opacity = "1";
  }
  slidePosition++;
  if (slidePosition > slide.length) {
    slidePosition = 1
  }
  slide[slidePosition - 1].style.opacity = "0";
  slide[slidePosition - 1].style.zIndex = "0";
  setTimeout(fadeSlides, 3500);

}

.slideshow-container {
  width: 100%;
  position: relative;
}

.mySlides {
  opacity: 1;
  position: absolute;
}

.fade {
  transition: opacity 1s, z-index 0s 1s;
}

<div class="slideshow-container">

  <div class="mySlides fade" style="z-index: 5">
    <img src="https://i.imgur.com/h9HMwvD.png" style="width:100%">
  </div>

  <div class="mySlides fade" style="z-index: 4">
    <img src="https://i.imgur.com/inAYNo3.png" style="width:100%">
  </div>

  <div class="mySlides fade" style="z-index: 3">
    <img src="https://i.imgur.com/8VHulyg.png" style="width:100%">
  </div>

  <div class="mySlides fade" style="z-index: 2">
    <img src="https://i.imgur.com/wZzx8GU.png" style="width:100%">
  </div>

  <div class="mySlides fade" style="z-index: 1">
    <img src="https://i.imgur.com/ZPO4z3V.png" style="width:100%">
  </div>

  <div class="mySlides fade" style="z-index: 0">
    <img src="https://i.imgur.com/yhuKaY8.png" style="width:100%">
  </div>

</div>

Answer 2

Temani Afif 的回答将有助于使您当前的方法看起来不错，但更简单的答案是，正如其他人评论的那样，只需在 one[=32] 上切换 class =]一次滑动。

您可以使用 CSS transition 属性来更简单地执行此操作，而不必涉及 @keyframes：给所有幻灯片一个过渡属性，然后切换 opacity 与 fade class。这样，当 fade class 从一张幻灯片切换到另一张幻灯片时，旧幻灯片会淡出，而新幻灯片会同时淡入。

您还可以通过不必为每张幻灯片单独 z-index 来进一步简化事情。不要试图按特定顺序将幻灯片全部堆叠在一起，只需担心将正确的幻灯片移到堆的顶部，不要担心下面的所有其他幻灯片，因为您看不到它们无论如何。

fadeSlides(); function fadeSlides() { var slide = document.getElementsByClassName("fade")[0]; var nextSlide = slide.nextElementSibling; if (nextSlide) { nextSlide.classList.add('fade'); } else { document.getElementsByClassName('mySlides')[0].classList.add('fade'); } slide.classList.remove('fade'); setTimeout(fadeSlides, 3500); }

.slideshow-container { width: 100%; position: relative; } .mySlides { opacity: 0; position: absolute; transition: opacity 1000ms ease; } .mySlides.fade { opacity: 1; z-index: 1; }

<div class="slideshow-container"> <div class="mySlides fade"> <img src="https://i.imgur.com/h9HMwvD.png" style="width:100%"> </div> <div class="mySlides"> <img src="https://i.imgur.com/inAYNo3.png" style="width:100%"> </div> <div class="mySlides"> <img src="https://i.imgur.com/8VHulyg.png" style="width:100%"> </div> <div class="mySlides"> <img src="https://i.imgur.com/wZzx8GU.png" style="width:100%"> </div> <div class="mySlides"> <img src="https://i.imgur.com/ZPO4z3V.png" style="width:100%"> </div> <div class="mySlides"> <img src="https://i.imgur.com/yhuKaY8.png" style="width:100%"> </div> </div>

CSS淡入淡出延迟？

CSS Fade Delay?

javascript

css

fade

slideshow