Introduction aux transitions en JavaScript et CSS
Objectifs
Dans cette vidéo, vous apprendrez à :
1. Créer des transitions avec JavaScript et CSS.
2. Manipuler le DOM avec des fonctions JavaScript.
3. Utiliser des propriétés CSS pour les animations.
Résumé
Dans cette leçon, vous apprendrez à utiliser JavaScript et CSS pour créer des transitions interactives, comme faire disparaître et réapparaître une image sur clic de bouton.
Description
Vue JS permet d'appliquer des effets de transition lorsque des éléments sont insérés, mis à jour ou supprimés du DOM. Vous pouvez appliquer automatiquement des classes CSS pour les transitions et les animations, ou intégrer des bibliothèques CSS tierces comme animate.css. Vous pouvez également utiliser JavaScript pour manipuler directement le DOM durant les hooks de transition, ou intégrer des bibliothèques d'animation JavaScript tierces comme velocity.js. Dans cette leçon, nous allons examiner une transition traditionnelle en JavaScript et CSS. Le but sera de faire disparaître une image en cinq secondes au clic d'un bouton, puis de la faire réapparaître au deuxième clic sur le même bouton. Nous partirons d'un squelette Vue standard, puis nous construirons l'application visuelle en ajoutant un bouton et une image. Ensuite, nous écrirons une fonction JavaScript pour gérer l'événement de clic, en modifiant l'opacité de l'image pour créer l'effet de disparition/réapparition. Finalement, nous utiliserons une feuille de style interne pour définir la transition de l'image, avec une durée de cinq secondes et un effet easing.
Questions fréquentes
Programme détaillé
Module 1 - Premiers pas en Vue3
Module 2 - Les composants Vue JS
Module 3 - Les applications SPA (Single Page Applications)
Module 4 - L'interface en ligne de commande Vue-Cli
Module 5 - Le gestionnaire d'état Vuex
Module 6 - Le gestionnaire d'état Pinia
Module 7 - Persistance des données avec Firebase
Module 8 - Plus loin avec Vue.js 3
