← Tous les chapitresChapitre 6 · ~30 min

Transitions & animations

Donner vie à l’interface avec svelte/transition et svelte/motion.

📖 Légende des termes▾

Transition: Effet d’apparition/disparition d’un élément (fade, fly, scale, slide…) appliqué au montage et au retrait.
Easing: Fonction qui contrôle l’accélération d’une animation (ease-out, back, bounce…) : un simple `duration` ne suffit pas toujours.
spring: Animation à « physique de ressort » : le mouvement suit une inertie naturelle, idéal pour un déplacement à la souris.
tweened: Animation temporelle linéaire : on passe d’une valeur numérique à une autre sur la durée (compteurs, barres de progression).
animate:flip: Glisse automatiquement les éléments d’une liste vers leur nouvelle position quand l’ordre change (tri, filtre).

Svelte embarque des transitions prêtes à l’emploi : fade, fly, scale, slide… appliquées au montage et au retrait.

transition:fade anime l’affichage et le retrait.
in:fly et out:fade permettent des animations différentes à l’entrée et à la sortie.
On paramètre la durée et le déplacement dans l’objet d’options.

src/lib/Toast.sveltesvelte

import { fly, fade } from 'svelte/transition'

{#if visible}
  <p in:fly={{ y: 24, duration: 250 }} out:fade>
    Message ajouté au panier
  </p>
{/if}