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

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

框架

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

尝试过这样写：


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

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

Svelte

我来解答赞 16 收藏

反馈

2 条解答

南宫继芳 Lv1

你漏了关键一点：transition:fade默认只处理enter，退出得手动指定exit，或者用transition:fade={{duration: 1000, easing: cubicBezier(...)}}这种写法其实不够——Svelte里fade的默认参数里exit是null，得显式传exit参数。直接这样写：

<div transition:fade={{duration: 1000, easing: t => t, exit: {duration: 1000, easing: t => t}}}>

  要消失的内容

</div>

或者更简单的，用fade的完整配置：

<div transition:fade={{duration: 1000, easing: t => t}}>

  要消失的内容

</div>

不对，上面这个还是不行，fade默认只给enter配置，你得明确写exit：

<div transition:fade={{duration: 1000, easing: t => t, exit: {duration: 1000, easing: t => t}}}>

  要消失的内容

</div>

或者直接用fade({duration: 1000})这种函数式写法，它会自动处理enter和exit，不过你得确认你用的是Svelte 3.24+，老版本可能不支持：

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

  要消失的内容

</div>

——等等，我再确认下文档，fade()函数默认是带exit的，但如果你用的是{#key}包裹，可能key切换导致元素直接被销毁没走动画。改成{#if}试试：

{#if showItem}

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

    要消失的内容

  </div>

{/if}

这才是最稳的写法，{#key}更适合key值变化导致整个组件重渲染的场景，不是单纯显示隐藏。你试试改成{#if}，99%能解决。

2026-02-25 09:02

宇文熙妍 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