Transitions / Transitions globales • Svelte Tutorial

Bases de Svelte Transitions Transitions globales

D’ordinaire, les transitions ne sont jouées sur les éléments que lorsque l’élément qui les contient directement est ajouté ou supprimé. Dans l’exemple ci-dessous, changer la visibilité de la liste complète ne déclenche pas les transitions des éléments de liste individuels.

Nous voudrions plutôt que les transitions soient jouées lorsque nous interagissons avec la checkbox, et pas uniquement lors que des éléments individuels sont ajoutés ou supprimés grâce au slider.

Nous pouvons faire cela avec une transition globale, qui est jouée lorsque n’importe quel bloc contenant les transitions est ajouté ou supprimé :

App

<div transition:slide|global>
	{item}
</div>

En Svelte 3, les transitions étaient globales par défaut, et vous deviez ajouter le modificateur |local pour les rendre locales.

Modifier cette page sur Github

précédent suivant

Évènements de transition Blocs key

<script>

	import { slide } from 'svelte/transition';

	let items = ['un', 'deux', 'trois', 'quatre', 'cinq', 'six', 'sept', 'huit', 'neuf', 'dix'];

	let showItems = $state(true);

	let i = $state(5);

</script>

<label>

	<input type="checkbox" bind:checked={showItems} />

	afficher la liste

</label>

<label>

	<input type="range" bind:value={i} max="10" />

</label>

{#if showItems}

	{#each items.slice(0, i) as item}

		<div transition:slide>

			{item}

		</div>

	{/each}

{/if}

<style>

	div {

		padding: 0.5em 0;

		border-top: 1px solid #eee;

</style>

show text show editor