Catégories
Plugin et site web

Transitions CSS dans Vuejs et Nuxtjs – Smashing Magazine

A propos de l'auteur

Développeur front-end basé à Lagos, Nigeria. Il aime convertir des conceptions en code et créer des choses pour le Web.
Plus à propos
Timi

Les transitions sont un bon moyen de supprimer, de modifier ou de mettre à jour des données dans une application, car leur occurrence ajoute un bel effet et est bonne pour l'expérience utilisateur. Dans ce didacticiel, nous examinerons les différentes façons d'appliquer des transitions dans les applications Vue.js et Nuxt.js.

Les transitions sont un module de CSS qui vous permet de créer des transitions progressives entre les valeurs de propriétés CSS spécifiques. Le comportement de ces transitions peut être contrôlé en spécifiant leur fonction de synchronisation, leur durée et d'autres attributs. L'utilisation de ces transitions dans vos applications et sites Web crée une meilleure expérience visuelle et attire et retient parfois l'attention de l'utilisateur pendant qu'une information est introduite ou quitte l'écran. Selon Can I Use, la plupart des navigateurs prennent en charge les transitions, bien qu'il existe quelques problèmes mineurs avec Internet Explorer et Safari.

Données sur la prise en charge de la fonction css-transitions sur les principaux navigateurs de caniuse.com
Source: caniuse.com. (Grand aperçu)

Vue.js est un framework JavaScript open source pour la création d'applications Web clientes et d'applications monopage (SPA). L'une des caractéristiques de ce cadre est la possibilité d'ajouter des transitions à une application de manière transparente, de basculer entre les pages ou les composants, et nous allons voir comment procéder dans ce didacticiel.

Nuxt.js est également un cadre JavaScript, construit au-dessus de Vue.js (et souvent appelé cadre d'un cadre), pour la création d'applications Web côté serveur, de sites Web générés statiquement, ainsi que de SPA. Il fonctionne de la même manière que Vue.js, donc si vous connaissez Vue.js, vous ne devriez pas avoir beaucoup de problèmes pour démarrer avec Nuxt.js. Nuxt.js est livré avec deux propriétés pour ajouter des transitions à une application, et nous allons les couvrir également dans ce didacticiel.

Ce tutoriel nécessite une connaissance de base de Vue.js ou Nuxt.js. Tous les extraits de code de ce didacticiel se trouvent sur GitHub.

Qu'est-ce qu'une transition?

Selon le Oxford Dictionary, une transition peut être définie comme:

«Un passage dans un écrit qui relie en douceur deux sujets ou sections.

Le processus ou une période de passage d'un état ou d'une condition à un autre. »

En termes de physique, une transition est définie ainsi:

"Un changement d'atome, de noyau, d'électron, etc. d'un état quantique à un autre, avec émission ou absorption de rayonnement."

À partir de ces définitions, nous avons une idée de ce qu'est une transition. Les définitions impliquent toutes deux choses ou états différents. En termes de code, une transition n'est pas si différente.

Qu'est-ce qu'une transition CSS?

Selon la documentation Web de Mozilla:

«CSS Transitions est un module de CSS qui vous permet de créer des transitions progressives entre les valeurs de propriétés CSS spécifiques. Le comportement de ces transitions peut être contrôlé en spécifiant leur fonction de synchronisation, leur durée et d'autres attributs. »

Cela signifie que nous pouvons définir une transition CSS comme: le changement dans la propriété CSS d'un ou plusieurs éléments d'une valeur à une autre.

Le CSS transition La propriété nous permet d'ajouter un effet de transition à tout élément valide. Il comprend jusqu'à quatre autres propriétés (cinq, si l'on compte la transition propriété elle-même) qui peut être utilisé individuellement ou combiné comme raccourci. Chaque propriété a une fonction différente.

transition-property

le transition-property accepte le nom de la propriété CSS sur laquelle nous voulons surveiller les modifications et dont nous souhaitons effectuer la transition. Cela ressemble à ceci:

.btn {
  width: 200px;
  height: 50px;
  transition-property: width;
  background-color: red;
  color: #fff;
  border: 0;
}

Mais cette propriété ne fait rien sans la propriété suivante.

transition-duration

le transition-duration spécifie l'heure à laquelle le changement du ou des éléments dans le transition-property devrait continuer. Cette propriété est requise pour que la transition au travail. S'il n'est pas défini (avec une valeur supérieure à 0s), la valeur par défaut de 0s signifierait qu'il ne fonctionnerait pas. Alors, définissons une durée pour cette transition:

.btn {
  width: 200px;
  transition-property: width;
  transition-duration: 2s;
  background-color: red;
  color: #fff;
  border: 0;
}

Ici, nous avons un élément avec un nom de classe de btn qui a une largeur de 200px. Nous utilisons à la fois le transition-property et le transition-duration propriétés ici. Cela signifie: «Hé, CSS, faites attention quand le width la propriété change, et lorsque cela se produit, laissez l'effet prendre 2s changer."

Donc, si nous avons un bouton avec un nom de classe btn, puis le index.html le fichier ressemblerait à ceci:




    
    
    CSS Transitions
    


    

Hi CSS Transitions

Ici, nous avons un fichier HTML qui contient un bouton avec une classe qui a transition-property et transition-duration propriétés surveillant les modifications de la largeur de l'élément.

Une chose à noter est que, pour que la transition sur notre bouton fonctionne, nous devons réellement changer la largeur de cet élément, soit en ajustant manuellement la largeur avec les outils de développement dans le navigateur, en utilisant l'un des pseudo CSS -classes, ou en utilisant JavaScript. Aux fins de ce didacticiel, nous allons utiliser la pseudo-classe CSS :hover pour changer la largeur du bouton:

// existing styles
.btn:hover {
  width: 300px;
}

Maintenant, si nous survolons ce bouton, nous devrions voir la largeur du bouton augmenter progressivement au cours du temps défini, ce qui est 2s.

Voir la propriété de transition et la durée de transition du stylo par Timi Omoyeni (@timibadass)
sur CodePen.

transition-timing-function

le transition-timing-function détermine la vitesse à laquelle l'effet de transition se produit. Cinq valeurs sont disponibles pour cette propriété:

  • ease
    Ceci (par défaut) spécifie un effet de transition qui commence lentement, puis devient rapide, puis se termine lentement.
  • linear
    Ceci spécifie un effet de transition avec la même vitesse du début à la fin.
  • ease-in
    Ceci spécifie un effet de transition avec un démarrage lent.
  • ease-out
    Ceci spécifie un effet de transition avec une fin lente.
  • ease-in-out
    Ceci spécifie un effet de transition avec un début et une fin lents.
  • cubic-bezier(n,n,n,n)
    Cela vous permet de définir vos propres valeurs dans une fonction cubique-bezier.

Donc, si nous ajoutons ease-in à notre bouton, nous devrions remarquer la vitesse à laquelle le width et height changement, par rapport à la vitesse à laquelle le bouton revient à son état normal. Voici notre mise à jour styles.css feuille:

.btn {
  width: 200px;
  height: 50px;
  transition-property: width;
  transition-duration: 2s;
  transition-timing-function: ease-in;
  background-color: red;
  color: #fff;
  border: 0;
}

Si nous voulons un effet de vitesse plus spectaculaire ou la liberté de définir un effet de vitesse spécifique, nous pouvons utiliser cubic-bezier(n,n,n,n):

btn {
    width: 200px;
    height: 50px;
    transition-property: width;
    transition-duration: 2s;
    transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
    background-color: red;
    color: #fff;
    border: 0;
}

Voir la fonction Pen transition-timing de Timi Omoyeni (@timibadass)
sur CodePen.

Une chose intéressante à propos de cette valeur est que vous pouvez la modifier directement dans le navigateur à l'aide des outils de développement.

Bézier cubique dans les outils de développement.
Bézier cubique dans les outils de développement du navigateur. (Grand aperçu)

Si vous cliquez sur la partie en surbrillance de vos outils de développement, vous obtiendrez une interface pour modifier le cubic-bezier options:

interface bezier cubique surlignée en jaune.
Interface bezier cubique surlignée en jaune. (Grand aperçu)

Lorsque vous déplacez les deux points, les valeurs de (n,n,n,n) changer, et vous verrez une représentation (surlignée en rouge) de la façon dont l'effet de vitesse apparaîtra. Cela peut être très utile lorsque vous avez à l'esprit un effet de vitesse spécifique.

transition-delay

le transition-delay La propriété définit le temps (en secondes) que la transition doit attendre avant que son effet ne commence à se produire. Cette fois est différente de la transition-duration , qui spécifie la durée de l'effet de transition.

.btn {
  width: 200px;
  height: 50px;
  transition-property: width;
  transition-duration: 2s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  transition-delay: 5s;
  background-color: red;
  color: #fff;
  border: 0;
}

Si vous essayez ceci dans le navigateur, vous remarquerez un délai avant que l'élément width commence à changer. Ceci est dû à la transition-delay propriété et valeur que nous avons définies.

Voir le Pen transition-delay de Timi Omoyeni (@timibadass)
sur CodePen.

Propriété sténographique

Les propriétés de transition individuelles peuvent être fastidieuses à utiliser. Pour cette raison, nous avons la propriété sténographie: transition. Il accepte toutes les propriétés dans un ordre défini:

{
  transition: a b c d;
}

Ici, les lettres correspondent comme suit:

  • une: transition-property
  • b: transition-duration
  • c: transition-timing-function
  • ré: transition-delay

Nous pouvons refactoriser notre transition existante vers le travail en utilisant cette propriété raccourcie:

// from
.btn {
  width: 200px;
  height: 50px;
  transition-property: width;
  transition-duration: 2s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  transition-delay: 1s;
  background-color: red;
  color: #fff;
  border: 0;
}

// to
.btn {
  width: 200px;
  height: 50px;
  transition: width 2s cubic-bezier(0.075, 0.82, 0.165, 1) 1s;
  background-color: red;
  color: #fff;
  border: 0;
}

Si nous essayons ce code dans le navigateur, nous obtiendrons le même effet de transition que nous avons obtenu lorsque nous avons utilisé les propriétés individuelles.

Voir le stylo en utilisant la propriété de raccourci par Timi Omoyeni (@timibadass)
sur CodePen.

Transitions dans Vue.js

Vue.js propose deux façons différentes d'ajouter des transitions à une application. Cela ne signifie pas que nous ne pouvons pas utiliser les transitions de la manière CSS. Cela signifie simplement que les développeurs de Vue.js se sont appuyés sur CSS pour faciliter l'utilisation des transitions. Examinons-les un par un.

Transition d'éléments et de composants individuels

Une façon d'utiliser les transitions dans Vue.js consiste à envelopper le transition composant autour d'un élément ou d'un composant, à l'aide de l'un des éléments suivants:

  • rendu conditionnel (utilisation v-if),
  • affichage conditionnel (utilisation v-show),
  • composants dynamiques,
  • nœuds racine du composant.

Lorsque nous développons une application, il y a des cas où nous voulons afficher des données pour l'utilisateur en fonction d'une valeur (telle qu'un booléen). Voici un exemple de fonctionnement, tiré de la index.vue fichier:




Nous avons ajouté deux paragraphes à cette page qui apparaissent en fonction de la valeur de show. Nous avons également un bouton qui modifie la valeur de show lorsque vous cliquez dessus. Nous ajouterons cette page à notre App.vue fichier en l'important comme ceci:



Si nous ouvrons le navigateur, nous devrions voir notre paragraphe et bouton:

vue page de destination lorsque le spectacle est vrai.
Page de destination Vue.js dans son état par défaut. (Grand aperçu)

En ce moment, cliquer sur le bouton ne change que la valeur de show, ce qui modifie le texte visible:

page de destination lorsque l'émission est fausse.
Page de destination lorsque vous cliquez sur le bouton. (Grand aperçu)

L'ajout d'une transition à ce paragraphe peut être effectué en encapsulant les deux paragraphes dans le transition composant. Ce composant accepte un name prop, qui est très important pour la transition vers le travail.


Ce nom indique à Vue.js la transition à appliquer aux éléments ou composants à l'intérieur de ce transition composant. À ce stade, si nous cliquons sur le bouton, nous ne remarquerons toujours aucune transition, car nous n'avons pas encore ajouté la configuration de notre transition sous la forme de classes CSS.

Une chose à noter est que, lors de l'utilisation d'une transition entre deux éléments de la même balise, nous devons spécifier un attribut clé sur chaque élément afin que la transition se produise.


Vue.js dispose de six classes de transition qui sont appliquées aux éléments ou composants à l'intérieur du transition et chacune de ces classes représente un état dans le processus de transition. Nous allons en examiner seulement quelques-uns.

v-enter

le v-enter La classe représente «l'état de départ pour enter». C'est le point auquel une condition (v-if ou v-else) a été remplie et l'élément est sur le point d'être rendu visible. À ce stade, la classe a été ajoutée à l'élément et elle est supprimée une fois l'élément ajouté. le name accessoire (dans ce cas, fade) attaché à transition composant est préfixé à ce nom de classe, mais sans le v. Ce v peut être utilisé par défaut si name n'est pas fourni. Ainsi, nous pouvons ajouter cette classe à notre index.vue fichier:


Tout d'abord, nous ajoutons un color de green à tous les paragraphes de la page. Ensuite, nous ajoutons notre première classe de transition, fade-name. À l'intérieur de cette classe, nous changeons le color au rouge, et nous utilisons le transform et translateY propriété pour déplacer le paragraphe par 20px le long de l'axe des y (verticalement). Si nous essayons de cliquer à nouveau sur le bouton, nous remarquerons que très peu ou pas de transition a lieu pendant le changement, car nous devons ajouter cette classe suivante que nous examinerons.

v-enter-active

le v-enter-active La classe représente l'état «entier entrant» d'un élément en transition. Cela signifie que cette classe est ajoutée juste avant que l'élément soit inséré ou devienne visible, et elle est supprimée lorsque la transition est terminée. Cette classe est importante pour v-enter pour fonctionner car il peut être utilisé pour ajouter le CSS transition à la classe, ainsi que ses propriétés (transition-property, transition-duration, transition-timing-function, et transition-delay), dont certains sont nécessaires pour que l'effet de transition fonctionne. Ajoutons cette classe à notre application et voyons ce qui se passe:

.fade-enter-active {
  transition: transform .3s cubic-bezier(1.0, 0.5, 0.8, 1.0), color .5s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}

Voir la transition Pen vue entrer dans l'état par Timi Omoyeni (@timibadass)
sur CodePen.

Maintenant, si nous cliquons sur le bouton, nous remarquerons la transition de la couleur et la position de chacun des textes au fur et à mesure qu'ils apparaissent. Mais la transition de visible à hidden n'est pas assez fluide, car aucune transition ne se produit.

v-leave-active

le v-leave-active La classe représente l'état entier dans lequel un élément passe de visible à hidden. Cela signifie que cette classe est appliquée à partir du moment où un élément commence à quitter la page et qu'elle est supprimée une fois la transition terminée. Cette classe est importante pour leave transition à appliquer car elle prend dans le CSS transition , qui prend également en compte d'autres propriétés de transition. Ajoutons ceci à notre application et voyons ce qui se passe:

.fade-leave-active {
  transition: transform 1s cubic-bezier(1.0, 0.5, 0.8, 1.0), color 1s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}

Voir l'état de transition Pen vue transition active par Timi Omoyeni (@timibadass)
sur CodePen.

Lorsque nous cliquons sur le bouton maintenant, nous remarquerons que l'élément qui devrait quitter attend environ 2 secondes avant de disparaître. C'est parce que Vue.js s'attend à ce que la prochaine classe avec cette transition soit ajoutée pour qu'elle prenne effet.

v-leave-to

le v-leave-to transition représente l'état de «départ», c'est-à-dire le moment où un élément commence à partir et sa transition est déclenchée. Il est ajouté une image après le déclenchement d'une transition de sortie et supprimé une fois la transition ou l'animation terminée. Ajoutons cette classe à notre application et voyons ce qui se passe:

.fade-leave-to {
  transform: translateX(100px);
  color: cyan;
}

En cliquant sur le bouton, nous remarquerons que chaque élément qui sort glisse vers la droite au fur et à mesure que la couleur change.

Voir le congé de transition Pen vue à l'État par Timi Omoyeni (@timibadass)
sur CodePen.

Maintenant que nous comprenons le fonctionnement des transitions dans Vue.js, voici une image qui rassemble tout cela:

classification des classes de transition de vue
Classification des classes de transition Vue.js. (Grand aperçu)

Enfin, notez la transition pas si douce qui se produit pendant les états d'entrée et de sortie des éléments en transition. En effet, les transitions de Vue.js se produisent simultanément. Vue.js a un mode accessoire qui nous aide à réaliser un processus de transition très en douceur. Cet accessoire accepte l'une des valeurs suivantes:

  • in-out
    Le nouvel élément passe d'abord en transition, puis, lorsqu'il est terminé, l'élément en cours se transforme en sortie.
  • out-in
    L'élément actuel passe d'abord en transition, puis, une fois terminé, le nouvel élément passe en transition.

Si nous ajoutons ceci mode à notre index.vue fichier et essayez à nouveau, nous devrions voir une meilleure transition:


Maintenant, si nous cliquons sur le bouton, nous remarquerons qu'un élément quitte avant qu'un autre n'entre. Ceci est le résultat de la mode nous avons sélectionné pour cette transition. Si nous essayons l'autre mode, nous obtiendrons un comportement différent.

Voir la transition Pen vue avec mode par Timi Omoyeni (@timibadass)
sur CodePen.

Transitions de liste

Si vous essayez d’ajouter des transitions à plusieurs éléments à la fois à l’aide du transition , une erreur sera imprimée sur la console:

Erreur de transition de vue imprimée dans la console.
Erreur Vue.js imprimée dans la console. (Grand aperçu)

En effet, le transition Le composant n'est pas censé rendre plus d'un élément à la fois. Si nous voulons faire la transition de deux éléments ou plus à la fois ou rendre une liste (en utilisant v-for), nous utilisons le transition-group composant. Ce composant accepte également un name prop, mais il a quelques différences par rapport à la transition composant, y compris les éléments suivants:

  • Un attribut clé est requis pour chaque élément à l'intérieur de ce composant.
  • Il n'est pas nécessaire de mode prop parce que plus d'un élément serait rendu à la fois.
  • UNE span L'élément est rendu par défaut, mais il peut être modifié en spécifiant un tag accessoire lors de la définition de la transition-group composant. Regardons un exemple (dans notre listTransition.vue fichier):
    


Ici, nous avons un tableau de users, que nous parcourons en utilisant v-for, affichant le nom dans notre section de modèle. Pour pouvoir afficher cette liste, nous devons importer ce composant dans le App.vue page:



Notez que lorsque vous utilisez le transition-group composant, au lieu d'envelopper notre liste avec un ul tag (ou tout tag que nous avons à l'esprit), nous l'enroulons autour de la transition-group composant et ajouter la balise à la tag accessoire, comme ceci:




Ici, nous avons remplacé le ul tag avec le transition-group et ajouté le composant ul comme le tag valeur prop. Si nous inspectons la page mise à jour dans les outils de développement, nous verrons que la liste est enveloppée dans l'élément que nous avons spécifié dans le tag accessoire (c'est-à-dire ul).

balise ul mise en évidence dans les outils de développement.
La balise ul mise en évidence dans les outils de développement. (Grand aperçu)

Nous avons également ajouté une transition name accessoire d'une valeur de slide-fade à ce composant, avec les règles de style ci-dessous dans le style section qui suit cette convention de dénomination. Pour que cela fonctionne, nous devons ajouter les lignes de code suivantes à notre fichier:



  

Dans la section modèle, nous ajoutons un événement de clic à chaque bouton de la boucle et passons le user.id à la removeUser associée à cet événement de clic. Nous créons ensuite cette fonction dans le script section de notre dossier. Cette fonction accepte un id comme argument. Ensuite, nous parcourons nos utilisateurs existants et filtrons l'utilisateur avec le id passé dans cette fonction. Lorsque cela est fait, nous enregistrons notre nouveau groupe d'utilisateurs dans les données de notre page.

À ce stade, si vous cliquez sur l'un des boutons pour les utilisateurs, un effet de transition sera appliqué lorsque l'utilisateur sera supprimé de la liste.

Voir la transition de la liste Pen Vue par Timi Omoyeni (@timibadass)
sur CodePen.

Transitions dans Nuxt.js:

L'ajout de transitions à une application Nuxt.js est très différent de la façon dont vous pourriez être habitué à Vue.js. Dans Nuxt.js, le transition composant est automatiquement ajouté à l'application pour vous. Tout ce que vous devez faire est l'un des suivants.

Ajoutez-le au composant de page individuel

Nuxt.js nous permet d'ajouter des transitions à un composant de page individuel de manière transparente. Cette transition est appliquée lorsque l'utilisateur navigue vers cette page. Il nous suffit d'ajouter un transition propriété au script section du composant. Cette propriété peut être une chaîne, une fonction ou un objet. Certaines des propriétés qu'il accepte sont:

Comme Vue.js, Nuxt.js a un défaut name qui est affecté à une classe de transition si non name est fourni, et il est appelé page. Voyons comment cela fonctionne lorsque nous l'ajoutons à notre application dans transition.vue:




Sur cette page, nous avons affiché «lorem ipsum» dans la section des modèles. Nous avons également ajouté le transition propriété, à laquelle nous avons passé un objet dont name est réglé sur fade et dont mode est réglé sur out-in. Enfin, dans le style , nous avons ajouté quelques styles qui contrôlent la transition lorsque l'utilisateur navigue entre cette page et une autre.

Pour que cette transition fonctionne, nous devons naviguer vers /transition, mais nous ne remarquerons aucune transition si nous entrons manuellement cet itinéraire dans notre navigateur. Alors, ajoutons un lien vers cette page sur le index.vue page.


Maintenant, si nous cliquons sur le lien sur l'une des deux pages, nous remarquerons une transition glissante lorsque le navigateur se déplace vers et depuis /transition route.

pageTransition

L'ajout de transitions à des pages individuelles peut être difficile si nous voulons les ajouter à toutes les pages de l'application. C'est là que pageTransition entre en jeu. Cette propriété nous permet d'ajouter une configuration générale pour toutes nos pages dans le nuxt.config.js fichier. Cette propriété accepte à la fois une chaîne et un objet en option. Voyons comment cela fonctionne dans nuxt.config.js:

export default {
    // ...
    /*
     ** Global CSS
     */
    css: (
        '~/assets/transition.css'
    ),
    pageTransition: {
        name: "fade",
        mode: "out-in"
    },
}

Ici, nous avons ajouté le lien vers un fichier CSS, que nous allons créer sous peu. Nous avons également ajouté le pageTransition au fichier, ainsi que sa configuration. Maintenant, créons notre fichier CSS, transition.csset ajoutez-y les styles suivants:

.fade-enter-active {
    transition: transform 0.3s cubic-bezier(1, 0.5, 0.8, 1), color 0.5s cubic-bezier(1, 0.5, 0.8, 1);
}
.fade-leave-active {
    transition: transform 1s cubic-bezier(1, 1, 1, 1), color 1s cubic-bezier(1, 0.5, 0.8, 1);
}
.fade-enter {
    color: mediumblue;
    transform: translateY(20px);
}
.fade-leave-to {
    transform: translate3d(-500px, -300px 400px);
    color: cyan;
}

Nous avons ajouté les classes et les styles qui seront appliqués à la transition entre un itinéraire et l'autre. Si nous nous débarrassons de la configuration de transition du transition.vue page et essayez de naviguer entre les deux pages, nous aurons un effet de transition.

layoutTransition

le layoutTransition La propriété nous permet d'appliquer des transitions en fonction de la mise en page de la page. Cela fonctionne de la même manière que pageTranslation, sauf qu'il fonctionne sur la base de layout. Le nom de transition par défaut est layout. Voici un exemple de son fonctionnement, en nuxt.config.js:

export default {
    // ...
    /*
     ** Global CSS
     */
    css: (
        '~/assets/transition.css'
    ),
    layoutTransition: {
        name: "fade",
        mode: "out-in"
    },
}

Notez que fade doit être le nom de la mise en page pour que la transition fonctionne avec sa mise en page. Créons cette nouvelle mise en page dans newLayout.vue pour voir ce que je veux dire:



Conclusion

Nous avons appris les transitions CSS et comment les créer individuellement à l'aide des propriétés de transition (transition-property, transition-duration, transition-timing-function, et transition-delay) et en utilisant la sténographie transition propriété. Nous avons également expliqué comment appliquer ces transitions dans Vue.js et Nuxt.js. Mais ce n'est pas tout. Vue.js a plus de façons pour nous d'appliquer des transitions dans une application:

Smashing Editorial(ks, ra, yk, il)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *