4. Transitions

Les transitions sont une fonctionnalité de Svelte très appréciée, car elles sont à la fois très puissantes et très simples à mettre en place.

Une "transition" est une petite animation jouée lorsqu'un élément entre ou sort du HTML, et uniquement dans l'un de ces deux cas-là.

Si un élément se déplace d'un endroit vers l'autre, on parlera plutôt d'"animation", ou de "motion".

Par exemple, le cas suivant permet d'afficher ou de cacher un élément lorsqu'on clique sur le <button> :

<script>
	let displayed = $state(true);

	function toggle() {
		displayed = !displayed;
	}
</script>

{#if displayed}
	<p>Coucou</p>
{/if}

<button onclick={toggle}>On/Off</button>

Pour ajouter une transition, par exemple de type fade, il suffit de rajouter transition:fade en "attribut" à l'élément concerné, en ayant auparavant importé fade depuis svelte/transition :

<script>
	import { fade } from 'svelte/transition';

	let displayed = $state(true);

	function toggle() {
		displayed = !displayed;
	}
</script>

{#if displayed}
	<p transition:fade>Coucou</p>
{/if}

<button onclick={toggle}>On/Off</button>

Notez que si vous interrompez la transition au milieu, l'élément va inverser sa course depuis l'endroit où il était au moment de l'interruption est les transitions, et non depuis l'une des extrémités de son parcours.

Il existe 7 transitions différentes prêtes à l'emploi : fade, slide, blur, fly, scale, draw et crossfade. Elles ne fonctionnent pas toutes de la même façon, mais sont toutes relativement simples à utiliser.

Vous pouvez également créer vos propres transitions personnalisées, mais cela sort du cadre de ce cours.

in et out

Utiliser transition signifie appliquer la même transition en entrée et en sortie. Mais il eil est possible de différencier la transition d'entrée et de sortie sur un même élément, en utilisant in et out à la place :

{#if displayed}
	<p in:fade out:slide>Coucou</p>
{/if}

Paramètres de transition

Vous pouvez paramétrer vos transitions avec différentes valeurs, selon la transition que vous choisissez.

Toutes ont a minima les paramètres duration (durée, en millisecondes), et delay (délai, en millisecondes). D'autres comme fly ont également un x et y représentant le point de départ de la transition (le point d'arrivée étant la position naturelle de l'élément).

Par défaut, duration vaut 400 et delay vaut 0, mais vous pouvez les modifier de cette façon  :

{#if displayed}
	<p transition:fade={{ duration: 1000, delay: 500 }}>Coucou</p>
{/if}

<button onclick={toggle}>On/Off</button>

Vous pouvez paramètrer les transitions in et out de la même façon.

Vous pouvez aussi jouer avec la courbe de lissage de la transition, appelée ease.

Transitions globales

Les transitions sont par défaut locales, ce qui signifie qu'elles ne sont jouées qui si le bloc {#if}, {#each} (ou autre) le plus proche déclenche l'apparition ou la disparition de l'élément concerné. Elles ne seront pas jouées sinon.

Un exemple plus explicite est disponible ici.

Pour pouvoir tout de même utiliser les transitions dans ce genre de cas, vous devez déclarer la transition comme étant globale en utilisant |global.

<p transition:fade|global>Coucou</p>

Contraintes

L'usage de transition, de in ou out est contraint par quelques règles :

• les transitions ne sont pas jouées lors du montage initial d'une page
• vous ne pouvez pas utiliser transition, in ou out directement sur un composant, mais uniquement sur des éléments HTML

Il peut être nécessaire de modifier son markup pour ajouter des éléments HTML autour de composants afin de pouvoir leur fournir les transitions souhaitées.

En savoir plus sur ce chapitre

Vous pouvez aussi apprendre comment créer vos transitions personnalisées en CSS ou JS