问一下前端的佬们

小白想问问为啥我的代码不能实现图片在消失时是逐渐消失，在出现时是逐渐出现的动画效果opacity: 0;
    transition: opacity 2s ease-in-out;

opacity:1;

我问chatgpt他是这样和我说的，可是实际并不管用，我想问问佬们我这里出了什么问题？

.slide{
    display: none;
     opacity: 0;
    transition: opacity 2s ease-in-out;
}
.active{
    display: block;
    opacity:1;
}<script>

    const slides = document.querySelectorAll(".slide");

    const arrowLeft = document.querySelector(".arrow-left");

    const arrowRight = document.querySelector(".arrow-right");

    

    // 定义当前显示图片的索引

    let currentSlideIndex = 0;

    

    // 定义定时器 ID

    let slideIntervalID = null;

    

    // 启动定时器

    function startSlide() {

      slideIntervalID = setInterval(() => {

        // 将当前图片的类“active”移除，并更新索引值

        slides[currentSlideIndex].classList.remove("active");

        currentSlideIndex = (currentSlideIndex + 1) % slides.length;

        // 在下一张图片上添加类“active”，以便它显示出来

        slides[currentSlideIndex].classList.add("active");

      }, 3000);

    }

    

    // 停止定时器

    function stopSlide() {

      clearInterval(slideIntervalID);

    }

    

    // 添加箭头点击事件处理器

    arrowLeft.addEventListener("click", () => {

      // 停止自动轮换

      stopSlide();

      // 将当前图片的类“active”移除，并更新索引值

      slides[currentSlideIndex].classList.remove("active");

      currentSlideIndex = (currentSlideIndex + slides.length - 1) % slides.length;

      // 在下一张图片上添加类“active”，以便它可以被显示

      slides[currentSlideIndex].classList.add("active");

      // 重新启动自动轮播

      startSlide();

    });

    

    arrowRight.addEventListener("click", () => {

      stopSlide();

      slides[currentSlideIndex].classList.remove("active");

      currentSlideIndex = (currentSlideIndex + 1) % slides.length;

      slides[currentSlideIndex].classList.add("active");

      startSlide();

    });

    

    // 启动自动轮播

    startSlide();

   </script>

<div class="slider">
                <div class="slidersmall">
                    <div>
                        < img src="img/明日方舟.webp" class="slide game active"/>
                    </div>
                    <div>
                        < img src="img/原神.webp" class="slide game" />
                    </div>
                    <div>
                        < img src="img/王者1.webp" class="slide game" />
                    </div>
                    <div class="arrowbigleft">
                    <div class="arrow-left">
                        </div>
                    </div>
                    <div class="arrowbigright">
                        <div class="arrow-right">
                        </div>
                    </div>
                </div>
            </div>