Svelte 的 transition 动画为啥不生效？

❤俊贺提问于 2026-03-05 21:02:21 阅读 58

框架

我在 Svelte 里用 transition 实现元素进出动画，但加了 fade 后完全没反应，是哪里写错了吗？

我试过 import { fade } from ‘svelte/transition’，也确认了元素有绑定到变量，但动画就是不出来。

<script>
	import { fade } from 'svelte/transition';
	let visible = true;
</script>

<button on:click={() => visible = !visible}>
	切换
</button>

{#if visible}
	<p transition:fade>这段文字应该淡入淡出</p>
{/if}

Svelte

我来解答赞 7 收藏

反馈

2 条解答

Top丶一泽 Lv1

第一步，我们需要检查一下你使用 transition 的方式。在 Svelte 中，transition 是一个修饰符，用于添加进入和离开时的动画效果。但是，你这里的语法有点小问题。transition 应该分别用于 in 和 out 动画，而不是直接用 transition。

第二步，我们来修改一下代码。你需要使用 in:fade 和 out:fade 来分别指定元素进入和离开时的动画。这样 Svelte 就知道什么时候应用哪个动画了。

第三步，更新后的代码如下：

script>

	import { fade } from 'svelte/transition';

	let visible = true;









{#if visible}

	这段文字应该淡入淡出


{/if}

这里的关键点在于 in:fade 和 out:fade。这两个修饰符告诉 Svelte 在元素显示和隐藏的时候分别应用 fade 动画。

第四步，如果你想要统一管理动画的持续时间或者缓动函数，可以在修饰符后面添加参数。例如，如果你想让动画持续 1000 毫秒，可以这样写：

script>

	import { fade } from 'svelte/transition';

	let visible = true;









{#if visible}

	这段文字应该淡入淡出


{/if}

这样设置后，fade 动画会在 1 秒内完成。

希望这样能解决你遇到的问题！如果还有其他疑问，尽管问我。

2026-03-22 04:02

Dev · 鹤荣 Lv1

哎这个坑我踩过！Svelte的transition确实有点小坑，你代码基本是对的，但缺了个关键点：duration参数。默认的fade动画太快了，快到你根本察觉不到。

改成这样立马见效：

{#if visible}

    <p transition:fade={{ duration: 500 }}>这段文字应该淡入淡出</p>

{/if}

500毫秒够你看清动画了。我之前也被这个坑过，盯着屏幕看了半天以为代码写错了，结果发现是动画太快像闪电一样过去了...

另外建议你检查下浏览器开发者工具里有没有报错，有时候样式冲突也会让动画失效。要是还不行，试试加上in:fade和out:fade分开控制进出动画。

2026-03-05 21:05