Transitions / Key blocks • Svelte Tutorial

Basic Svelte 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

{#key i}
	<p in:typewriter={{ speed: 10 }}>
		{messages[i] || ''}
	</p>
{/key}

Edit this page on GitHub

previous next

Global transitions Raw state

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

show text show editor