Svelte中if-else状态切换时如何实现过渡衔接（最少代码）

当前使用{#if}/{:else if}切换不同阶段元素时，会出现新旧元素过渡重叠的问题——旧元素还没完全淡出，新元素就已经开始淡入。

最优最少代码方案 #

用{#key}块包裹整个条件渲染逻辑即可解决：

{#key state}
  {#if state === 1}
    <div class="red" transition:fade/>
  {:else if state === 2}
    <div class="blue" transition:fade/>
  {:else if state === 3}
    <div class="green" transition:fade/>
  {/if}
{/key}

原理说明 #

{#key}的作用是：当绑定的state值发生变化时，会先销毁旧的DOM元素并等待其淡出过渡完成，再创建新的DOM元素并触发淡入过渡。这样就实现了两个状态过渡的无缝衔接，不会出现重叠显示的情况。

这个方案不需要修改原有过渡逻辑，仅添加一层{#key}包裹，是代码改动量最小的解决方案。

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