Skip to main content

Part 2 / Transitions / Key blocks

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.svelte
{#key i}
	<p in:typewriter={{ speed: 10 }}>
		{messages[i] || ''}
	</p>
{/key}

Next: Deferred transitions

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 { onMount } from 'svelte';
	import { typewriter } from './transition.js';
	import { messages } from './loading-messages.js';
 
	let i = -1;
 
	onMount(() => {
		const interval = setInterval(() => {
			i += 1;
			i %= messages.length;
		}, 2500);
 
		return () => {
			clearInterval(interval);
		};
	});
</script>
 
<h1>loading...</h1>
 
<p in:typewriter={{ speed: 10 }}>
	{messages[i] || ''}
</p>
initialising