Key blocks destroy and recreate their contents when the value of an expression changes. This is useful if you want an element to play its transition whenever a value changes instead of only when the element enters or leaves the DOM.
Here, for example, we’d like to play the typewriter
transition from transition.js
whenever the loading message, i.e. i
changes. Wrap the <p>
element in a key block:
App
{#key i}
<p in:typewriter={{ speed: 10 }}>
{messages[i] || ''}
</p>
{/key}
previous next
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>