Les transitions et les animations jouent un rôle majeur dans l'expérience utilisateur. En ajoutant des animations et des transitions subtiles entre les éléments de la page Web, vous pouvez améliorer l'expérience de l'utilisateur. Le site Web semblera beaucoup plus fluide, plus attrayant et généralement meilleur.

Ce tutoriel montre comment implémenter des transitions et des animations dans Vue.js. Vous apprendrez à créer à la fois des transitions simples et des animations complexes à l'aide de transition composant et images clés CSS.

Le composant de transition Vue.js

Vue.js a une fonction intégrée transition composant qui vous permet de créer des animations dans votre application. Ce composant s'enroule autour de l'élément cible que nous voulons animer.

Ici, le composant de transition enveloppe l'en-tête de niveau 1 :

 Bonjour </h1>
</transition>

Lorsque vous enveloppez un élément avec le transition composant, le composant appliquera des classes de transition à l'élément qu'il enveloppe. Il y a six classes de transition au total. Trois contrôlent l'animation de l'élément lorsqu'il entre dans la page. Les trois autres contrôlent l'animation de l'élément lorsqu'il quitte la page.

Le code utilisé dans cet article est disponible dans ce Référentiel GitHub et est libre d'utilisation sous la licence MIT.

Application de classes de transition lorsque des éléments entrent dans la page

Pendant le processus d'entrée de l'élément dans le DOM, le transition le composant applique les classes entrée de, entrer dans, et entrée-active à cela. Ces classes vous permettent de contrôler la façon dont l'élément s'animera ou transitera sur la page.

• entrée de: appliqué à l'élément avant qu'il n'entre dans un navigateur. Vous utilisez cette classe pour définir l'état CSS initial de l'élément.
• entrer dans: Appliqué à l'élément lors de son entrée dans le navigateur. Vous utilisez cette classe pour définir l'état CSS final de l'élément.
• entrée-active: appliqué lorsque l'élément passe d'un état à un autre. C'est ici que vous dictez la durée de la transition.

Voyons un exemple :

<transition>
 <h1> Bonjourh1>
transition>
.enter-de {
opacité: 0;
}
.enter-to {
opacité: 1;
}
.enter-actif {
transition: opacité 2sfaciliter;
}

Avec ce code, l'en-tête de niveau un prend deux secondes pour passer de l'invisible (opacité: 0) à entièrement visible (opacité: 1). Cette transition se produit lorsque l'élément entre dans le DOM. Sans la transition, le texte serait apparu immédiatement sur le navigateur une fois la page chargée.

Application de classes de transition lorsque des éléments quittent la page

Le transition prend en charge trois autres classes de transition que vous devez appliquer lorsque l'élément quitte le DOM. Leurs noms sont partir de, laisser-faire, et laisser-actif. Ces classes contrôlent la manière dont l'élément s'anime ou transite depuis la page.

Comme vous l'avez peut-être deviné, ces classes sont similaires aux entrer- classes dont nous avons parlé plus tôt. Mais ces classes ne sont activées que lorsque l'élément est sur le point de se démonter du DOM. Le montage et le démontage sont des concepts importants du DOM. En tant que développeur, vous devez avoir un compréhension de base du DOM et d'autres concepts connexes.

Voyons un exemple :

<transition>
 <h1> Bonjourh1>
transition>
.partir de {
opacité: 0;
}
.laisser-à {
opacité: 1;
}
.leave-actif {
transition: opacité 2sfaciliter;
}

Dans ce cas, l'en-tête de niveau un prend deux secondes pour passer lentement du visible (opacité: 1) à invisible (opacité: 0). Cette transition se produit lorsque l'élément quitte le DOM. Sans la transition, le texte aurait disparu instantanément du navigateur.

Utilisation des noms de transition

Vous pouvez également ajouter un nom attribut à votre composant de transition. Lorsque vous faites cela, Vue ajoutera le nom à vos classes de transition. Cela signifie que vous pouvez avoir plusieurs transitions sur votre page, chacune avec des classes de transition et des propriétés CSS uniques.

Par exemple, si vous définissez le nom disparaître sur votre composant de transition, alors toutes les classes de transition seront préfixées par disparaître:

<transitionnom ="disparaître">
 <h1> Bonjourh1>
transition>
.fade-enter-from {
opacité: 1;
}
.fade-congé-de {
opacité: 1;
}
// autre "entrer" et "partir" Des classesavecledisparaîtrecommepréfixe

Création de transitions à l'aide du composant de transition

Pour illustrer la transition dans Vue.js, vous allez encapsuler un H1 au sein de la transition composant. Sous, vous allez créer un bouton. Lorsque ce bouton est cliqué, il bascule la variable montrer le titre entre FAUX et vrai.

Voici le code :

Ensuite, définissez le scénario section. Cette rubrique contient les installation méthode où vous initialisez le montrer le titre variables avec FAUX.