Svelte轮播图淡入淡出失效问题求助

问题根源 #

• 用display: none/block控制轮播项显隐：设置display: none会直接将元素从DOM布局中移除，过渡动画（CSS动画或Svelte transition）无法触发——元素没有渐变过程，直接消失/出现。
• CSS .fade 动画仅执行一次：仅在元素首次挂载时运行，切换轮播项时元素已存在于DOM中，不会重新触发动画。
• 自定义<transition>标签用法错误：这不是Svelte的标准过渡用法，无法响应current值变化来触发过渡。

解决方案 #

1. 调整布局：让轮播项叠加显示 #

将所有轮播项放在同一容器内，用绝对定位让它们重叠，通过opacity控制可见性——元素始终存在于DOM中，过渡效果才能正常触发。

2. 使用Svelte官方fade过渡（推荐） #

Svelte自带的fade过渡可轻松实现淡入淡出，配合条件渲染触发过渡逻辑。

完整修正代码 #

脚本部分

<script lang="ts">
    import { onMount, onDestroy } from "svelte";
    import { fade } from 'svelte/transition'; // 导入官方fade过渡

    const images: string[] = ["/img-new-fixed.png", "/placeholder-9.png"];
    let current = 0;
    let delay = 8000; // 8秒切换间隔
    let interval: NodeJS.Timeout;

    function setcurrent(index: number) {
        current = index;
        clearInterval(interval);
        interval = setInterval(nextSlide, delay);
    }

    function nextSlide() {
        current = (current + 1) % images.length;
    }

    onMount(() => {
        interval = setInterval(nextSlide, delay);
    });

    onDestroy(() => {
        clearInterval(interval);
    });
</script>

模板部分

<div class="maestro-list"
     on:mouseenter={() => clearInterval(interval)}
     on:mouseleave={() => interval = setInterval(nextSlide, delay)}>
    <!-- 轮播容器：相对定位让内部轮播项叠加 -->
    <div class="banner-container">
        {#each images as image, index}
            {#if index === current}
                <div class="banner-item" transition:fade={{ duration: 1500 }}>
                    <span class="pic">
                        <img src={image} alt="dragon" loading="lazy" />
                    </span>
                    <a class="banner_lnk" href="/">.</a>
                </div>
            {/if}
        {/each}
    </div>

    <div class="num">
        {#each images as _, index}
            <span class="dot {index === current ? 'active' : ''}"
                  tabindex="0"
                  role="button"
                  on:click={() => setcurrent(index)}
                  on:keypress={(e) => e.key === "Enter" && setcurrent(index)} />
        {/each}
    </div>
</div>

CSS部分

.maestro-list {
    position: relative;
    width: 100%;
    height: 400px; /* 根据需求调整高度 */
    overflow: hidden;
}

.banner-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.banner-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.banner-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.num {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    cursor: pointer;
}

.dot.active {
    background: rgba(255,255,255,1);
}

替代方案：纯CSS过渡实现 #

如果不想用Svelte transition，可通过绑定opacity和CSS过渡属性实现：

{#each images as image, index}
    <div class="banner-item"
         style="opacity: {index === current ? 1 : 0}; transition: opacity 1.5s ease;">
        <!-- 内容不变 -->
    </div>
{/each}

保持banner-item的绝对定位布局，切换current时，opacity变化会自动触发CSS过渡。

关键说明 #

• 禁用display: none：改用opacity、visibility或绝对定位控制显隐，保证元素始终在DOM中。
• Svelte transition依赖条件渲染：{#if index === current}会在current变化时销毁旧元素、创建新元素，从而触发fade过渡。
• CSS过渡需绑定可过渡属性：确保transition属性作用在元素上，且变化的属性（如opacity）支持过渡动画。

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