Svelte 的 transition 动画为啥不生效？

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

框架

我在 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

我来解答赞 0 收藏

反馈

1 条解答

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