Utilisation de Velocity.js pour les animations
Objectifs
L'objectif de cette vidéo est de vous guider dans l'intégration et l'utilisation de la bibliothèque Velocity.js pour créer des animations dans une application Vue 3.
Résumé
Apprenez à utiliser la bibliothèque Velocity.js pour créer des animations complexes dans une application Vue 3.
Description
Dans cette leçon, vous découvrirez comment intégrer et utiliser Velocity.js pour réaliser des animations dans une application Vue 3. Nous verrons ensemble comment référencer cette bibliothèque dans notre projet via un CDN, puis comment utiliser un composant transition pour entourer l'élément à animer. En désactivant les règles CSS sur l'élément avec la directive v-bind:css="false" et en ajoutant des gestionnaires événementiels, nous allons voir comment appliquer différentes animations simultanément.
Vous apprendrez à :
- Intégrer Velocity.js dans une application Vue 3
- Utiliser le composant
transitionpour les animations - Définir des méthodes événementielles dans le ViewModel
- Appliquer plusieurs animations en simultané avec Velocity.js
À la fin de la leçon, vous aurez les compétences pour créer des animations complexes et interactives dans vos projets Vue 3.
Questions fréquentes
v-bind:css="false" est utilisée pour désactiver les règles CSS sur l'élément à animer.
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
