如何使用 JavaScript 添加緩入淡出效果

Question

好吧，我是 javascript 新手，我正在學習。 現在我想在這段代碼中添加一個輕松的效果……我該怎么做？

let slideIndex = 0;

const showSlides = () => {
    const slides = document.getElementsByClassName("slide");

    for(let 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,3000);
};

showSlides();

Answer 1

您可以使用 css 來做到這一點：

.slide {
  transition: opacity 1s ease;
}

有關更多信息，請查看： MDN - 使用 CSS 轉換

然后不是切換顯示，而是切換不透明度：

slides[i].style.opacity = 0; // hide

slides[i].style.opacity = 1; // show