SvelteKit中通过#each循环应用动画失效问题求解

核心方案 #

直接用#each循环时，所有元素会被同时挂载，导致in:fly动画同步触发，看起来像“失效”。不需要依赖tick()，只需给每个元素的动画添加基于数组索引的延迟，就能实现文字依次飞入的效果。

具体实现代码 #

<script>
  import { fly } from 'svelte/transition';
  const textList = ['Hello', 'SvelteKit', 'Fly', 'Animation'];
  // 每段文字的动画间隔，可按需调整
  const animationGap = 200;
</script>

{#each textList as text, idx}
  <span 
    in:fly={{ y: 30, duration: 600, delay: idx * animationGap }}
    style="display: block; margin: 10px 0;"
  >
    {text}
  </span>
{/each}

关键说明 #

• 利用#each提供的idx（数组项索引），计算每个元素的动画延迟：idx * animationGap。索引从0开始，所以第一项无延迟，第二项延迟200ms，以此类推，自然形成依次飞入的效果。
• fly动画配置里的y:30表示从下方30px位置飞入，duration:600是动画总时长，可根据视觉需求调整参数。
• 给<span>设置display:block是让每个文本单独成行，方便观察动画顺序，可根据实际布局修改样式。

为什么这个方法更规范 #

之前用tick()是通过异步等待强制分批挂载元素，属于“曲线救国”的临时方案，还会触发代码检查报错。而通过索引控制动画延迟，是Svelte动画系统的标准用法，直接从动画触发时机入手，逻辑清晰且符合规范。

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