Transitions / Blocs key • Svelte Tutorial

Bases de Svelte Transitions Blocs key

Les blocs #key détruisent et reconstruisent leur contenu lorsque la valeur d’une expression change. Ceci sert si vous souhaitez qu’un élément joue sa transition à chaque fois qu’une valeur change plutôt qu’uniquement lorsqu’un élément entre ou sort du DOM.

Ici par exemple, nous voulons jouer la transition typewriter définie dans transition.js à chaque fois que le message de chargement, c-à-d i, change. Entourez l’élément <p> dans un bloc #key :

App

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

Modifier cette page sur Github

précédent suivant

Transitions globales État brut

<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>chargement...</h1>

<p in:typewriter={{ speed: 10 }}>

	{messages[i] || ''}

</p>

show text show editor