Cours Svelte et SvelteKit · Module 9: Transitions et animations
Ragnarok - Transitions et animations
Dans cette leçon5
Bienvenue sur le champ de Ragnarok ! Tout comme le crépuscule des dieux apporte des transformations spectaculaires, Svelte offre des outils puissants pour les animations.
Transitions intégrées
<script>
import { fade, fly, slide, scale, blur, draw } from 'svelte/transition';
let visible = $state(true);
</script>
<button onclick={() => visible = !visible}>Toggle</button>
{#if visible}
<div transition:fade>Fade</div>
<div transition:fly={{ y: 200 }}>Fly</div>
<div transition:slide>Slide</div>
<div transition:scale>Scale</div>
<div transition:blur={{ amount: 10 }}>Blur</div>
{/if}Paramètres de transition
<script>
import { fly } from 'svelte/transition';
import { cubicOut } from 'svelte/easing';
</script>
<div transition:fly={{
x: 100, // Décalage X
y: -50, // Décalage Y
duration: 500, // durée (ms)
delay: 100, // délai (ms)
easing: cubicOut // fonction d'accélération
}}>
Animated!
</div>in : et out : - Animations séparées
<script>
import { fade, fly } from 'svelte/transition';
let visible = $state(true);
</script>
{#if visible}
<div
in:fly={{ y: -50, duration: 300 }}
out:fade={{ duration: 200 }}
>
Flies in, fades out smoothly
</div>
{/if}Transitions locales et globales
En Svelte 5, les transitions sont locales par défaut : elles ne jouent que lorsque le bloc auquel elles appartiennent directement (par exemple ce {#if}) apparaît ou disparaît, pas quand un bloc parent change. Pour qu'elles jouent à chaque fois, ajoute le modificateur |global :
<div transition:fade|global>Toujours animé</div>Les transitions ne jouent pas non plus au premier rendu de la page : elles n'animent que les changements suivants.
Événements des transitions
Tu gères les événements des transitions comme n'importe quel autre événement en Svelte 5, avec des attributs on... :
<div
transition:fade
onintrostart={() => console.log('Intro start')}
onintroend={() => console.log('Intro end')}
onoutrostart={() => console.log('Outro start')}
onoutroend={() => console.log('Outro end')}
>
Animated element
</div>Ragnarok est un spectacle de transformation - tout comme tes animations !
Code de cette leçon : App.svelte
<script>
// Ragnarök - Fin et commencement, transitions entre les états
// transition: - transitions intégrées
import { fade, fly, slide, scale, blur } from 'svelte/transition';
let visible = $state(true);
let selectedTransition = $state('fade');
</script>
<main class="ragnarok">
<h1>Ragnarök - Transitions</h1>
<p class="subtitle">Transitions intégrées de Svelte</p>
<section>
<h2>Choisir une transition</h2>
<div class="options">
{#each ['fade', 'fly', 'slide', 'scale', 'blur'] as t}
<button
class:active={selectedTransition === t}
onclick={() => selectedTransition = t}
>
{t}
</button>
{/each}
</div>
<button class="toggle" onclick={() => visible = !visible}>
{visible ? 'Masquer' : 'Afficher'}
</button>
</section>
<div class="demo-area">
{#if visible}
{#if selectedTransition === 'fade'}
<div class="box" transition:fade>
fade - fondu en douceur
</div>
{:else if selectedTransition === 'fly'}
<div class="box" transition:fly={{ y: 100, duration: 500 }}>
fly - arrive en volant depuis le bas
</div>
{:else if selectedTransition === 'slide'}
<div class="box" transition:slide>
slide - glissement
</div>
{:else if selectedTransition === 'scale'}
<div class="box" transition:scale={{ start: 0.5 }}>
scale - mise à l’échelle
</div>
{:else if selectedTransition === 'blur'}
<div class="box" transition:blur={{ amount: 10 }}>
blur - flou
</div>
{/if}
{/if}
</div>
</main>
<style>
.ragnarok {
font-family: 'Georgia', serif;
max-width: 500px;
margin: 0 auto;
padding: 2rem;
background: linear-gradient(135deg, #1a0a0a 0%, #2a0a1a 100%);
color: #f7d5e8;
min-height: 100vh;
}
h1 {
color: #ff6b6b;
text-align: center;
}
.subtitle {
text-align: center;
color: #a87ca8;
}
section {
background: rgba(255, 107, 107, 0.1);
border: 1px solid #ff6b6b;
border-radius: 8px;
padding: 1rem;
margin: 1rem 0;
}
h2 {
color: #ff6b6b;
font-size: 1rem;
margin-top: 0;
}
.options {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 1rem;
}
button {
padding: 0.5rem 1rem;
background: #3a1a2a;
color: #f7d5e8;
border: 1px solid #ff6b6b;
border-radius: 4px;
cursor: pointer;
}
button.active {
background: #ff6b6b;
color: #1a0a0a;
}
.toggle {
width: 100%;
padding: 0.75rem;
font-size: 1.1rem;
}
.demo-area {
min-height: 150px;
display: flex;
align-items: center;
justify-content: center;
margin-top: 1rem;
}
.box {
padding: 2rem;
background: rgba(255, 107, 107, 0.2);
border: 2px solid #ff6b6b;
border-radius: 8px;
text-align: center;
color: #ffd700;
}
</style>Entrées de la documentation utilisées dans cette leçon
Tu as repéré une erreur dans cette leçon ?
Teste tes connaissances
Réponds aux questions de cette leçon. Choisis une réponse pour voir tout de suite si elle est correcte.
1. Quelles transitions intégrées Svelte propose-t-il ?
2. Comment définir des animations différentes pour l'entrée et la sortie ?
Tâches pratiques dans le jeu
- Éditeur de code
Complète le code pour que l'élément apparaisse avec un effet fade