CATALOGUE Code & Data Apprendre Svelte 3 et SvelteKit 1.0 Comment désactiver des images dans Svelte avec une animation de sortie

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

Animations d'éléments HTML avec le module transition - Partie 2
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre Svelte 3 et SvelteKit 1.0
Revoir le teaser Je m'abonne
Transcription

Cette leçon fait partie de la formation
129,00€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

DescriptionProgrammeAvis

Cette leçon fait partie de la formation
129,00€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

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.

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.

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.

Voir plus
Questions réponses
Quelle méthode JavaScript est utilisée pour filtrer les images dans le tableau?
La méthode utilisée est filter.
Quelle est l'utilité de passer une fonction anonyme dans l'interpolation en utilisant ES6?
Cela permet de passer un paramètre à la fonction qui sera exécutée lors du clic.
Quels cas de test sont couverts dans la vidéo?
Les tests incluent la suppression d'une image unique et la gestion des duplicatas d'images.

Programme détaillé