CSS过渡未生效求助：列表悬停切换图片无过渡效果

核心问题 #

• 你用了Bootstrap的d-none/d-md-block切换图片显示状态，但CSS过渡不支持display属性的变化，所以过渡完全没效果。
• CSS选择器写错了：.test_image .d-md-block是后代选择器，实际应该用交集选择器.test_image.d-md-block；而且transition-timing-function用法错误，这只是设置过渡曲线，得用transition属性完整定义过渡规则。

修复方案一：纯CSS实现过渡（优先推荐） #

放弃display切换，改用opacity+visibility配合绝对定位让图片重叠，实现平滑过渡：

1. 修改HTML结构 #

给图片容器加相对定位，所有图片绝对定位重叠，移除原有的d-none/d-md-block，用自定义active类控制显示：

<div class="image_container" style="position: relative; height: 500px; width: 700px;">
    <img src="https://cdn.shopify.com/s/files/1/1218/4290/products/Solid-101-DeepRed_1400x.jpg" class="test_image active" id="test_image_1" style="position: absolute; top:0; left:0; height: 100%; width: 100%;" />
    <img src="https://www.jbcandcompany.com/images/S%20Orange.png" class="test_image" id="test_image_2" style="position: absolute; top:0; left:0; height: 100%; width: 100%;" />
    <img src="https://cdn.shopify.com/s/files/1/1218/4290/products/Solid-125-BrightPink_1024x.jpg" class="test_image" id="test_image_3" style="position: absolute; top:0; left:0; height: 100%; width: 100%;" />
</div>

2. 编写CSS过渡规则 #

.test_image {
    opacity: 0;
    visibility: hidden;
    /* 同时过渡透明度和可见性，避免隐藏元素干扰交互 */
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}

.test_image.active {
    opacity: 1;
    visibility: visible;
}

3. 修改JS逻辑 #

把切换d-md-block/d-none改成切换active类：

const test_list_items = document.querySelectorAll('.test_list_item');

test_list_items.forEach(element => {
    element.addEventListener('mouseover', () => {
        let previous_item = document.querySelector('.test_list_item.selected');
        let current_item = element;

        // 无需切换直接返回
        if (!previous_item || previous_item.id === current_item.id) return;

        let previous_image = document.querySelector(`#test_image_${previous_item.id.slice(-1)}`);
        let current_image = document.querySelector(`#test_image_${element.id.slice(-1)}`);

        previous_item.classList.remove('selected');
        current_item.classList.add('selected');

        previous_image.classList.remove('active');
        current_image.classList.add('active');
    });
});

修复方案二：JavaScript控制过渡 #

如果一定要保留Bootstrap的d-none类，可以手动用JS控制过渡时序：

const test_list_items = document.querySelectorAll('.test_list_item');

test_list_items.forEach(element => {
    element.addEventListener('mouseover', () => {
        let previous_item = document.querySelector('.test_list_item.selected');
        let current_item = element;

        if (!previous_item || previous_item.id === current_item.id) return;

        let previous_image = document.querySelector(`#test_image_${previous_item.id.slice(-1)}`);
        let current_image = document.querySelector(`#test_image_${element.id.slice(-1)}`);

        previous_item.classList.remove('selected');
        current_item.classList.add('selected');

        // 先让旧图片透明，过渡结束后隐藏
        previous_image.style.opacity = '0';
        previous_image.style.transition = 'opacity 0.5s ease-in-out';
        
        setTimeout(() => {
            previous_image.classList.remove('d-md-block');
            previous_image.classList.add('d-none');
            // 显示新图片前先重置透明度，再触发过渡
            current_image.style.opacity = '0';
            current_image.classList.remove('d-none');
            current_image.classList.add('d-md-block');
            setTimeout(() => {
                current_image.style.opacity = '1';
            }, 10);
        }, 500);
    });
});

这种方式需要手动控制延时，复杂度更高，优先选纯CSS方案。

额外注意点 #

• 如果要适配移动端，记得在CSS里加@media规则调整过渡逻辑，和Bootstrap的响应式断点对齐
• 确保所有图片尺寸一致，避免切换时布局跳动

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