CATALOGUE Code & Data Formation Svelte Apprendre Svelte 3 et SvelteKit 1.0

Comment désactiver des images dans Svelte avec une animation de sortie

Retour à la formation
Chapitre 8 Leçon 5
Précédent
Suivant

Découvrez comment réagir aux clics sur les images dans le DOM pour les faire disparaître avec un effet d'animation en utilisant Svelte.

Détails de la leçon

Description de la leçon

Dans cette vidéo, vous apprendrez à manipuler les images affichées dans le DOM de votre application Svelte. Le projet consiste à faire disparaître n'importe quelle image avec un effet de transition lorsque l'utilisateur clique dessus. Pour cela, nous commençons par insérer un déclencheur onClick dans la balise image, ce qui appelle une fonction nommée supprimer. Cette fonction utilisera la méthode JavaScript filter afin de retirer l'image cliquée de la liste des images affichées.

Nous transmettons une fonction anonyme via une interpolation utilisant une notation ES6, ce qui permet de passer un paramètre à la fonction. Ensuite, nous définissons la fonction supprimer, qui applique la méthode filter sur le tableau des images. Chaque image du tableau est évaluée et la fonction retourne true pour les images à conserver et false pour celle à supprimer.

Nous passons ensuite aux tests pratiques pour vérifier le fonctionnement du script. Les cas de test incluent la suppression d'une image unique et la gestion des duplicatas d'images. Cette leçon vous permet ainsi de comprendre comment désactiver dynamiquement des images dans Svelte avec un effet de transition élégante.

Objectifs de cette leçon

L'objectif de cette vidéo est de montrer comment réagir aux événements de clics pour faire disparaître des images avec un effet d'animation en utilisant le framework Svelte.

Prérequis pour cette leçon

Bonnes connaissances en JavaScript, compréhension de base des événements DOM, et expérience préalable avec le framework Svelte.

Métiers concernés

Développeurs front-end, ingénieurs logiciel, concepteurs d'applications web, spécialistes de l'UI/UX.

Alternatives et ressources

Les alternatives incluent l'utilisation de frameworks comme React ou Vue.js pour manipuler les éléments DOM et appliquer des animations.

Questions & Réponses

La méthode utilisée est filter.
Cela permet de passer un paramètre à la fonction qui sera exécutée lors du clic.
Les tests incluent la suppression d'une image unique et la gestion des duplicatas d'images.