在Svelte的{#each}块中实现fly过渡是否可行？

完全可行，Svelte的过渡系统原生支持在{#each}循环块中为列表项添加过渡效果，你的代码已经是正确的实现方式之一。

关键实现要点： #

• 键值绑定：{#each}块中使用(value.i)作为唯一键值，这是保证过渡正常工作的关键——Svelte需要通过键值准确识别每个列表项，确保添加/移除项时能正确触发过渡，而非直接重渲染整个列表。
• 独立过渡参数：你可以为每个列表项设置个性化的过渡参数（比如代码中用value.i*300动态计算动画时长），实现差异化的动画效果，这在{#each}块中完全支持。
• 触发时机：当visible状态切换为true时，所有列表项会按照你配置的delay、duration和easing参数执行fly入场动画。

你的实现代码示例： #

{#if visible}
  {@const i=1000}
  <div in:fly={{ y: 50, duration:i, delay: 100, easing: cubicOut }}>
    test234
  </div>
  <div in:fly={{ y: 50, duration:i, delay: 100, easing: cubicOut }}>
    test234
  </div>
  {#each values as value (value.i)}
    <div in:fly={{ y: 50, duration: value.i*300, delay: 100, easing: cubicOut }}>
      {value.val} and i is {value.i}
    </div>
  {/each}
{/if}

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