在Svelte中遍历store内容时如何实现文本切换过渡效果？

当然可以实现，通过Svelte自带的过渡能力配合{#key}语法就能快速完成需求，核心逻辑是监听当前索引的变化，触发旧元素销毁、新元素创建时的淡入淡出过渡。

实现步骤 #

• 第一步：从svelte/transition引入内置的fade过渡效果
• 第二步：用{#key}块包裹你的文本展示元素，绑定当前索引作为key值：当key值变化时，Svelte会自动销毁旧元素、创建新元素，自动触发绑定的过渡动画

完整示例代码 #

<script>
  import { writable } from 'svelte/store';
  import { fade } from 'svelte/transition';

  // 示例：存在store中的文本数组
  const textArray = writable(['初始文本', '第二个文本', '第三个文本', '第四个文本']);
  // 当前展示的索引
  let currentIndex = 0;
</script>

<!-- 切换索引的按钮 -->
<button on:click={() => currentIndex = (currentIndex + 1) % $textArray.length}>
  切换文本
</button>

<!-- 索引变化时触发过渡 -->
{#key currentIndex}
  <p transition:fade={{ duration: 300 }}>
    {$textArray[currentIndex]}
  </p>
{/key}

效果调整说明 #

• 默认配置下新旧文本会同步淡入淡出，总动画时长为你配置的duration值
• 如果你需要先让旧文本完全淡出，再淡入新文本，可以分开配置出入场动画：

  {#key currentIndex}
    <p 
      out:fade={{ duration: 200 }} 
      in:fade={{ duration: 200, delay: 200 }}
    >
      {$textArray[currentIndex]}
    </p>
  {/key}
  

• 你还可以根据需求调整duration（动画时长，单位ms）、delay（动画延迟触发时间，单位ms）等参数自定义动画效果。

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