我如何创建交叉淡入淡出以便我可以使用 javascript 调用 css 中的关键帧？

Question

我正在尝试为 html 中的照片创建淡入淡出效果。如何在显示图像时将css中的关键帧调用到javascript？

我必须使用 javascript 作为幻灯片要求的一部分

看来我必须插入.classlist.add？

var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("fade");
  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);
}

@keyframes fadein {
  from {
    opacity: .4
  }
  to {
    opacity: 1
  }
}

@keyframes fadeout {
  from {
    opacity: .4
  }
  to {
    opacity: 1
  }
}

    <!-- Images used for slideshow -->
    <div class="fade">
      <figure><img class="img-fluid" src=https://via.placeholder.com/150

C/O https://placeholder.com/"></figure>
    </div>
    <div class="fade">
      <figure><img class="img-fluid" src="https://via.placeholder.com/150

C/O https://placeholder.com/"> </figure>
    </div>
    <div class="fade">
      <figure><img class="img-fluid" src="https://via.placeholder.com/150

C/O https://placeholder.com/"></figure>
    </div>
    <div class="fade">
      <figure><img class="img-fluid" src="https://via.placeholder.com/150

C/O https://placeholder.com/"></figure>
    </div>
    <div class="fade">
      <figure><img class="img-fluid" src="https://via.placeholder.com/150

C/O https://placeholder.com/eg"></figure>
    </div>
    </div>

Answer 1

您不需要关键帧：

// Set the delay between slides
const delay = 1000

// Get an array of any elements with a class of 'fade'
const slides = Array.from( document.querySelectorAll('.fade') )

// Function to cycle through each slide, show it, then hide it after the specified delay
const cycleSlides = () => {
  // use Array.map to iterate through the elements in the slides array
  slides.map( (slide, i) => {

  // Show the slide
  setTimeout( () => {
    showSlide(slide)
  }, delay * i)

  // Hide the slide after the specified delay
  setTimeout( () => {
    hideSlide(slide)
  }, (delay*i)+delay)

  }) // End of map iterator
}

// Function to fade in a single slide
const showSlide = (slide) => {
  //Add the '--in' class
  slide.classList.add('--in')
}

// Function to fade out a single slide
const hideSlide = (slide) => {
  // Remove the '--in' class
  slide.classList.remove('--in')
}

// Call our cycle function for the first time
cycleSlides()

// Restart our cycle function each time it finishes
setInterval( () => {
  cycleSlides()
}, delay*slides.length)

.fade {
    display: inline-block;
    position: absolute;
    opacity: 0;
    transition: opacity .4s ease-in-out;
}
.fade.--in {
    opacity: 1;
}

<div class="fade">
  <img class="img-fluid" src="https://via.placeholder.com/150/0000FF?text=1" />
</div>
<div class="fade">
  <img class="img-fluid" src="https://via.placeholder.com/150/FF0000?text=2" />
</div>
<div class="fade">
  <img class="img-fluid" src="https://via.placeholder.com/150/FFFF00?text=3" />
</div>
<div class="fade">
  <img class="img-fluid" src="https://via.placeholder.com/150/008000?text=4">
</div>

更新：根据 OP 的要求，ES5 版本：

// Set the delay between slides
var delay = 1000

// Get an array of any elements with a class of 'fade'
var slides = Array.from( document.querySelectorAll('.fade') )

// Function to cycle through each slide, show it, then hide it after the specified delay
function cycleSlides() {
    // iterate through the elements in the slides array
    for (var i = 0; i < slides.length; i++) {

        // Show the slide
        showSlide(slides[i], delay*i)

        // Hide the slide after the specified delay
        hideSlide(slides[i], (delay*i)+delay)
    } // End of map iterator
}

// Function to fade in a single slide
function showSlide(slide, _delay) {
    //Add the '--in' class
    setTimeout(function() {
        slide.classList.add('--in')
    }, _delay)
}

// Function to fade out a single slide
function hideSlide(slide, _delay) {
    // Remove the '--in' class
    setTimeout(function() {
        slide.classList.remove('--in')
    }, _delay)
}

// Call our cycle function for the first time
cycleSlides()

// Restart our cycle function each time it finishes
setInterval(function() {
    cycleSlides()
}, delay*slides.length)

.fade {
    display: inline-block;
    position: absolute;
    opacity: 0;
    transition: opacity .4s ease-in-out;
}
.fade.--in {
    opacity: 1;
}

<div class="fade">
  <img class="img-fluid" src="https://via.placeholder.com/150/0000FF?text=1" />
</div>
<div class="fade">
  <img class="img-fluid" src="https://via.placeholder.com/150/FF0000?text=2" />
</div>
<div class="fade">
  <img class="img-fluid" src="https://via.placeholder.com/150/FFFF00?text=3" />
</div>
<div class="fade">
  <img class="img-fluid" src="https://via.placeholder.com/150/008000?text=4">
</div>

我如何创建交叉淡入淡出以便我可以使用 javascript 调用 css 中的关键帧？

How do i create a cross fading so i can use javascript to call the keyframes in the css?

html

javascript

css

cross-fade