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

Question

Well, I'm new at javascript, I'm learning. Now I want to add an effect of ease in this code..how do I do that?

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

You can do it using css:

.slide {
  transition: opacity 1s ease;
}

For more information check: MDN - Using CSS transitions

And then instead of switching display, you switch opacity:

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

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