Introduction et premiers pas
La syntaxe de base de Svelte
Conditions, boucles et gestion événementielle
Les composants
Slots et Lifecycle hooks
Gestion des formulaires
Les stores de Svelte
Animations et transitions
Une application SPA avec Svelte
SvelteKit
Détails de la leçon
Description de la leçon
Dans cette leçon, vous apprendrez à animer une balise div en utilisant Svelte Motion et Twind. Nous allons créer un bouton qui, au clic, déplacera une balise div vers la droite en modifiant la propriété margin-left. Pour accomplir cela, nous commencerons par importer Twind depuis @svelte/motion et définir la structure HTML de la balise div et du bouton. Ensuite, nous créerons une fonction déplace qui augmentera progressivement une variable appelée gauche, provoquant ainsi le déplacement de la balise div. Finalement, nous testerons notre code pour vérifier que la balise se déplace correctement de 5rem à chaque clic. Dans la vidéo suivante, nous explorerons comment utiliser le store Spring pour des animations plus naturelles.
Objectifs de cette leçon
L'objectif de cette vidéo est de vous montrer comment :
- Animer une propriété CSS inline en utilisant Svelte Motion.
- Utiliser Twind pour gérer des animations.
- Déplacer des éléments HTML avec du code JavaScript simplifié.
Prérequis pour cette leçon
Pour suivre cette vidéo, il est recommandé d'avoir :
- Une connaissance de base en HTML, CSS, et JavaScript.
- Des notions de base en Svelte.
Métiers concernés
Les compétences abordées dans cette vidéo peuvent être particulièrement utiles pour :
- Les développeurs front-end visant à améliorer l'interactivité de leurs sites web.
- Les web designers souhaitant ajouter des animations CSS dans leurs projets.
Alternatives et ressources
Comme alternatives à Svelte Motion et Twind, vous pouvez envisager d'utiliser :
- Anime.js pour des animations JavaScript plus complexes.
- GSAP (GreenSock Animation Platform) pour des animations professionnelles et performantes.
Questions & Réponses
Je m'abonne