当表达式的值发生变化时，Key 块会销毁并重新创建其内容。如果你希望元素在值发生变化时都播放其过渡效果，而不是仅在元素进入或离开 DOM 时播放，这个功能就很有用。
例如，在这里我们希望每当加载消息（即 i）发生变化时，都播放来自 transition.js 的 typewriter 过渡效果。将 <p> 元素包裹在一个 key 块中：
App
{#key i}
<p in:typewriter={{ speed: 10 }}>
{messages[i] || ''}
</p>
{/key}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script>
import { typewriter } from './transition.js'; import { messages } from './loading-messages.js';let i = $state(-1);
$effect(() => { const interval = setInterval(() => {i += 1;
i %= messages.length;
}, 2500);
return () => {clearInterval(interval);
};
});
</script>
<h1>loading...</h1>
<p in:typewriter={{ speed: 10 }}> {messages[i] || ''}</p>