Svelte过渡动画为什么在组件销毁时没有触发？

Newb.翌喆提问于 2026-02-14 17:42:27 阅读 9

框架

我在用Svelte的fade过渡时发现，给组件加了transition:fade后显示时有动画，但删除组件时却没有退出动画。按照文档应该自动触发exit，我是不是哪里漏配了？

尝试过这样写：


{#key(showItem)}
  <div transition:fade={{duration: 1000}}>
    要消失的内容
  </div>
{/key}

但点击隐藏按钮后内容直接消失，没有渐隐效果。控制台也没有报错，这是为什么呢？

Svelte

我来解答赞 9 收藏

反馈

1 条解答

宇文熙妍 Lv1

这个问题其实挺常见的，很多人会以为只要加了 transition:fade，组件销毁时就会自动触发退出动画，但实际上 Svelte 的过渡动画需要特定的条件才能正常工作。

首先我们分析一下原因。Svelte 的过渡动画分两种：一种是元素首次渲染时的进入动画，另一种是元素移除时的退出动画。你遇到的问题是退出动画没有触发，这通常是因为 Svelte 没有正确检测到元素的移除过程。具体来说，{#key} 块虽然能触发重新渲染，但它并不会为子元素提供一个明确的“离开”状态，所以过渡动画无法生效。

解决办法很简单，换成 {#if} 块来控制显示和隐藏。{#if} 块能确保 Svelte 清楚地知道元素什么时候被移除，这样退出动画就能正常触发了。

给你一个修改后的代码示例：

  

<script>

  import { fade } from 'svelte/transition';

  let showItem = true;

</script>



<button on:click={() => showItem = !showItem}>

  切换显示

</button>



{#if showItem}

  <div transition:fade={{ duration: 1000 }}>

    要消失的内容

  </div>

{/if}

这里我把 {#key} 换成了 {#if}，通过 showItem 变量来控制内容的显示和隐藏。点击按钮切换 showItem 的值时，Svelte 就能正确识别出元素要被移除，从而触发退出动画。

如果你还是想用 {#key}，也不是不行，但需要额外处理。比如给每个 key 值绑定唯一的标识，确保 Svelte 能正确追踪元素的生命周期。不过这种方式更复杂，建议直接用 {#if}，简单又可靠。

最后提醒一下，调试这种问题的时候可以试着在浏览器里放慢动画速度，或者加点日志看看变量的变化，有时候问题就藏在这些细节里。

2026-02-14 18:32