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

Posted 2023-02-25

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

【英文标题】：How do i create a cross fading so i can use javascript to call the keyframes in the css?

【发布时间】：2019-08-05 13:27:19

【问题描述】：

我正在尝试在 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>

【问题讨论】：

这么简单的滑块不需要JS，check this out

我在本地检查过..它工作正常..你想要什么？请解释清楚

我想在 javascript 中定位 css 关键帧，例如：slides[slideIndex-1].style= "fadein" 在它显示为块之前和之后目标 "fadeout"

能否上传图片或使用placeholder.com 之类的内容，以便我们提供更好的帮助？

【参考方案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>

【讨论】：

我觉得cmets说的很清楚了，我再补充，给我几分钟时间。

代码似乎对我不起作用。我在网站上显示了五张图片

抱歉，我忘了从 NodeList 创建一个数组。我已经更新了代码，现在应该可以使用了。

我已经整理了一下——添加了一个延迟变量，并且每次都使用一个间隔来重新启动循环功能。

嗨 @LewisDonovan - 我已将您的 codepen 添加为 Stack sn-p，因此它可以在站点内运行。希望你不要介意！