Svelte each列表切换时元素动画异常，求正确实现方案

API 探路者

2026-6-15

解决方案

问题根源在于动画时序不协调，animate:flip与in/out过渡的执行顺序冲突，导致元素布局挤占、动画不同步。以下是修正后的实现思路与代码：

核心调整点

统一动画时长，协调out、animate:flip、in三者的时序逻辑，避免布局冲突
让新旧元素的过渡动画部分重叠，实现自然的切换/交换效果
给列表容器和元素添加基础样式，确保flip动画能精准计算位置变化

修正后的代码

<script>
    import { fade } from 'svelte/transition';
    import { flip } from 'svelte/animate';
    
    const listOne = ['a', 'b', 'c', 'd'];
    const listTwo = ['e', 'c', 'f', 'g'];

    let listIndex = $state(0);
    const list = $derived(listIndex === 0 ? listOne : listTwo);
    
    const ANIM_DURATION = 1000; // 统一动画时长为1秒
</script>

<!-- 容器确保布局稳定，避免元素跳动 -->
<div style="position: relative;">
    {#each list as item (item)}
        <p 
            style="margin: 8px 0; position: relative;"
            animate:flip={{ duration: ANIM_DURATION }}
            in:fade={{ duration: ANIM_DURATION, delay: ANIM_DURATION * 0.2 }} 
            out:fade={{ duration: ANIM_DURATION, delay: 0 }}
        >{item}</p>
    {/each}
</div>

<button onclick={() => {
    listIndex = listIndex === 0 ? 1 : 0;
}}>Toggle</button>

关键说明

时序优化：out动画立即启动（时长1s），flip动画同步执行（针对保留元素如示例中的c），in动画延迟0.2s启动——既避免新元素立即挤占位置，又让整体动画连贯流畅。
布局稳定性：给容器和列表项设置position: relative与固定margin，确保flip动画能准确计算元素的位置偏移量。
单元素切换场景：当从['a']切换到['b']时，a的淡出动画与b的淡入动画会部分重叠，形成自然的交换过渡效果，而非旧元素完全消失后新元素才出现。