如何为Javascript转换添加延迟？

Question

这是我的Javascript代码-

var slideshows = document.querySelectorAll('[data-component="slideshow"]');
slideshows.forEach(initSlideShow);
function initSlideShow(slideshow) {
    var slides = document.querySelectorAll(`#${slideshow.id} [role="list"] .slide`);
    var index = 0, time = 10000;
    slides[index].classList.add('active');
    setInterval( () => {
        slides[index].classList.remove('active');
        index++;
        if (index === slides.length) index = 0;
        slides[index].classList.add('active');
    }, time);
}

这是我的标记 -

<?php foreach( $hero_images as $image_id ): ?>
    <div class="slide" style="background-image: linear-gradient(rgba(0,0,0, 0.5), rgba(0,0,0, 0.5)), url('<?php echo wp_get_attachment_image_url( $image_id, 'full' );  ?>')">
        <div class="text">
            <h1>Example</h1>
            </div>
        </div>
    </div>
<?php endforeach; ?>

我有一组来自 Word Press 的图像，并将它们放在父 div 的背景中。

这是 CSS -

[data-component="slideshow"] .slide {
  display: none;
}

[data-component="slideshow"] .slide.active {
  display: block;
}

它只是切换 CSS 显示规则

代码有效，div 在显示无和显示块之间过渡，但我希望过渡更平滑。我想添加淡入效果。

我以为这样的事情就可以了 -

.slide {
  opacity: 0;
  transition: 1s;
}

.active {
  opacity: 1 !important;
  transition: 1s;
}

但是没有任何影响。

是否可以为

display:none

到

display:block

的过渡添加延迟？

Answer 1

在将“active”类添加到下一张幻灯片之前，使用 setTimeout 在幻灯片之间的过渡添加延迟。 在此修改中，我添加了一个 transitionDelay 变量来控制从当前幻灯片中删除“活动”类并将其添加到下一张幻灯片之间的延迟。根据需要调整transitionDelay的值。

var slideshows = document.querySelectorAll('[data-component="slideshow"]');
slideshows.forEach(initSlideShow);

function initSlideShow(slideshow) {
    var slides = document.querySelectorAll(`#${slideshow.id} [role="list"] .slide`);
    var index = 0, time = 10000, transitionDelay = 1000; // Adjust transition delay as needed

    slides[index].classList.add('active');

    setInterval(() => {
        slides[index].classList.remove('active');
        index++;
        if (index === slides.length) index = 0;

        setTimeout(() => { // Add a delay before adding the 'active' class
            slides[index].classList.add('active');
        }, transitionDelay);
    }, time + transitionDelay); // Add transition delay to the interval time
}

CSS

.slide {
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s, visibility 0s 1s;
}

.active {
  opacity: 1 !important;
  visibility: visible !important;
  transition: opacity 1s, visibility 0s;
}