如何为滑块组件添加淡入淡出过渡动画？

核心问题 #

你当前通过修改display: none/block切换滑块，而display属性无法触发CSS过渡动画，这是过渡效果无效的根本原因。我们需要改用opacity和visibility属性配合CSS过渡，同时调整滑块布局让它们重叠显示。

步骤1：调整HTML结构 #

将所有滑块包裹在一个容器内，确保滑块能重叠显示：

<!-- 在body中添加滑块容器，把所有.screen.mySlides移进去 -->
<div class="slider-container">
    <div class="screen mySlides active">
        <!-- 原滑块内容 -->
    </div>
    <div class="screen mySlides">
        <!-- 原滑块内容 -->
    </div>
    <!-- 其他滑块... -->
</div>
<!-- 下方的dot-container、blob、blur保持不变 -->

注意：给初始显示的第一个滑块添加active类。

步骤2：添加/修改CSS样式 #

在styles.css中添加以下样式：

/* 滑块容器：设置相对定位，隐藏溢出内容 */
.slider-container {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

/* 每个滑块：绝对定位让它们重叠，默认透明不可见 */
.screen.mySlides {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    /* 设置过渡动画时长和曲线，可根据需求调整 */
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}

/* 激活状态的滑块：完全可见 */
.screen.mySlides.active {
    opacity: 1;
    visibility: visible;
}

步骤3：修改JavaScript代码 #

更新showSlides函数，不再操作display属性，而是通过切换active类来控制显示：

function showSlides(n) {
    let i;
    let slides = document.getElementsByClassName("mySlides");
    let dots = document.getElementsByClassName("dot");
    
    if (n > slides.length) {
        slideIndex = 1;
    }
    if (n < 1) {
        slideIndex = slides.length;
    }
    
    // 移除所有滑块的active类
    for (i = 0; i < slides.length; i++) {
        slides[i].classList.remove('active');
    }
    // 移除所有指示器的active类
    for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", "");
    }
    
    // 给当前滑块和指示器添加active类
    slides[slideIndex - 1].classList.add('active');
    dots[slideIndex - 1].className += " active";
}

额外优化 #

你当前每个滑块内都有prev和next按钮，会导致页面上出现多个切换按钮，建议将这两个按钮移到滑块容器外，避免重复：

<div class="slider-container">
    <!-- 所有滑块 -->
</div>
<!-- 统一的切换按钮 -->
<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
<a class="next" onclick="plusSlides(1)">&#10095;</a>

然后给按钮添加定位样式，让它们悬浮在滑块上方：

.prev, .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    /* 其他原有样式保持不变 */
}

内容的提问来源于stack exchange，提问作者user3493222