CSS类切换时实现过渡效果：轮播图透明度切换故障排查

问题核心是你用了 display: none 隐藏轮播项——CSS过渡对 display 属性完全无效，元素会直接从页面中消失/出现，根本触发不了过渡动画。要实现透明度过渡，得让所有轮播项始终留在DOM流里，通过opacity和层级控制来实现显示切换。

修改后的CSS代码 #

.featured {
    flex-direction: column;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
}

.featured__slides {
    position: relative; /* 新增：让子元素绝对定位基于该容器 */
    width: 100%;
    height: auto;
}

.featured__item {
    position: absolute; /* 所有轮播项重叠放置 */
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transition: opacity .3s linear; /* 仅针对opacity做过渡，更高效 */
    pointer-events: none; /* 隐藏状态下不响应点击 */
}

.featured__active {
    opacity: 1;
    position: relative; /* 提升当前项的层级，避免被其他项遮挡 */
    pointer-events: auto; /* 恢复交互能力 */
}

.featured__arrows {
    display: flex;
    justify-content: space-between;
    position: absolute;
    left: 0;
    right: 0;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

.featured__arrow {
    height: var(--size-lg);
    width: var(--size-lg);
    color: var(--clr-cyan400);
}

修改后的JS代码 #

const nextArrow = document.querySelector(".featured__next");
const prevArrow = document.querySelector(".featured__prev");

let idx = 0;
const slideshowElements = document.querySelectorAll(".featured__item");

nextArrow.addEventListener("click", function () {
    slideshowElements[idx].classList.remove("featured__active");
    idx = (idx + 1) % slideshowElements.length;
    slideshowElements[idx].classList.add("featured__active");
});

prevArrow.addEventListener("click", function () {
    slideshowElements[idx].classList.remove("featured__active");
    idx = (idx - 1 + slideshowElements.length) % slideshowElements.length;
    slideshowElements[idx].classList.add("featured__active");
});

关键调整说明 #

1. 给.featured__slides加相对定位，确保轮播项的绝对定位不会超出容器范围
2. 所有轮播项默认绝对定位重叠，用opacity:0隐藏，同时禁用点击避免干扰
3. 激活类.featured__active通过opacity:1显示元素，并用相对定位提升层级
4. JS简化类切换逻辑，直接用add/remove替代toggle，避免状态混乱，用取余运算简化索引循环判断

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