首次加载时不要运行CSS动画

Question

当用户加载页面时，第一张图片不应淡入。它应该只在第一个和后续循环完成后淡入。我基本上希望第一张图片在页面加载时立即完全显示。

HTML：

<div class="slideshow-container">
  <div class="mySlides fade">
    <img src="VirtualBox_Fedora_12_11_2017_02_22_46.png">
  </div>
  <div class="mySlides fade">
    <img src="25945941662_d9a450d7ef_b.jpg">
  </div>
  <div class="mySlides fade">
    <img src="img3.jpg">
  </div>
</div>

CSS：

.mySlides {
  display: none;
}
.mySlides.fade img {
  /*background: */
  display: block;
  height: 60vh;
  margin: auto;
  margin-bottom: 10px;
}
.fade {
  animation-duration: 1.0s;
  animation-name: fade;
}
@keyframes fade {
  from {opacity: .6}
  to {opacity: 1}
}

JS：

var slideIndex = 0;
showSlides();

function showSlides() {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
    }
    slideIndex++;
    if (slideIndex > slides.length) {slideIndex = 1}
    slides[slideIndex-1].style.display = "block";
    setTimeout(showSlides, 5000); // Change image every 2 seconds
}

Answer 1

添加一个类，从动画中删除第一个img。的 e.g。

.fade:not(.first) {
  animation-duration: 1.0s;
  animation-name: fade;
}

确保在初始加载后删除该类。使用以下内容：

for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
    // the check
    if (slides[i].classList.contains('first')) {
      slides[i].classList.remove('first');
    }
}

以下是一个有效的例子：https://codepen.io/pablo-tavarez/pen/JONKrW

Answer 2

我认为使用数据属性通常可用于启用/禁用动画......

var slideIndex = 0
, slides = document.getElementsByClassName('mySlide');
slides[slideIndex].style.display = 'block';
setTimeout(showNextSlide, 5000);
function showNextSlide() {
	var l = slides[slideIndex++];
	l.dataset.dontAnimate = 0;
	l.style.display = 'none';
	if(slides.length == slideIndex)
		slideIndex = 0;
	slides[slideIndex].style.display = 'block';
	setTimeout(showNextSlide, 5000);
}

.mySlide {
  display: none;
}
.mySlide img {
  display: block;
  height: 60vh;
  margin: auto;
  margin-bottom: 10px;
}
.fade:not([data-dont-animate="1"]) {
  animation-name: fade;
  animation-duration: 1.0s;
}
@keyframes fade {
  from { opacity: 0.6 }
  to { opacity: 1 }
}

<div class="slideshow-container">
  <div class="mySlide fade" data-dont-animate="1">
	<h1>
	  Slide 1
	</h1>
  </div>
  <div class="mySlide fade">
	<h1>
	  Slide 2
	</h1>
  </div>
  <div class="mySlide fade">
	<h1>
	  Slide 3
	</h1>
  </div>
</div>