Hi CSS Transitions 
         Survolez sur moi pour voir une transition sympa 
    




 Ici, nous avons un fichier HTML qui contient un bouton avec une classe qui a  propriété transition-propriété  et  transition-durée  propriétés surveillant les changements 
 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'une des pseudo-classes CSS  ou en utilisant JavaScript. Pour les besoins de ce didacticiel, nous allons utiliser la pseudo-classe CSS : hover  pour modifier la largeur du bouton: 
 // styles existants
.btn: hover {
  largeur: 300px;
} 
 Maintenant, si nous survolons ce bouton, nous devrions voir la largeur du bouton augmenter progressivement au cours du temps défini, qui est  2 s .
 Voir la propriété de transition Pen  transition et transition-duration  par Timi Omoyeni ( @timibadass )
 sur  CodePen . 
 transition-timing-function 
 La propriété  transition-timing-function  détermine la vitesse à laquelle l'effet de transition se produit. Cinq valeurs sont disponibles pour cette propriété:
 aisance 
 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 le même vitesse du début à la fin.
 entrée en douceur 
 Ceci spécifie un effet de transition avec un démarrage lent.
 sortie en douceur 
 Ceci spécifie un effet de transition avec une fin lente.
 facilité- in-out 
 Ceci spécifie un effet de transition avec un début et une fin lents.
 cubic-bezier (n, n, n, n) 
 Ceci vous permet de définir vos propres valeurs dans une fonction cubic-bezier.
 Donc, si nous ajoutons  l'aisance  à notre bouton, nous devrions remarquer la vitesse à laquelle la largeur   et la hauteur   changent, par rapport à la vitesse auquel le bouton revient à son état normal. Voici notre feuille  styles.css  mise à jour:
 .btn {
  largeur: 200 px;
  hauteur: 50px;
  propriété de transition: largeur;
  durée de transition: 2s;
  fonction de synchronisation de transition: facilité;
  couleur de fond: rouge;
  couleur: #fff;
  bordure: 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 {
    largeur: 200 px;
    hauteur: 50px;
    propriété de transition: largeur;
    durée de transition: 2s;
    fonction de synchronisation de transition: bezier cubique (0,075, 0,82, 0,165, 1);
    couleur de fond: rouge;
    couleur: #fff;
    bordure: 0;
}
 Voir le Pen  transition-timing-function  par 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.
 Si vous cliquez sur la partie en surbrillance de vos outils de développement, vous obtiendrez une interface pour modifier les  cubic-bezier  options:
 Lorsque vous déplacez les deux points, les valeurs de  (n, n, n, n)  changent et vous verrez une représentation (mise en surbrillance en rouge) de l'apparence de l'effet de vitesse. Cela peut être très utile lorsque vous pensez à un effet de vitesse spécifique.
 transition-delay 
 La propriété  transition-delay  définit la durée (en secondes) pendant laquelle la transition doit attendre avant son effet commence à se produire. Cette heure est différente de la propriété  transition-duration qui spécifie la durée de l'effet de transition.
 .btn {
  largeur: 200 px;
  hauteur: 50px;
  propriété de transition: largeur;
  durée de transition: 2s;
  fonction de synchronisation de transition: bezier cubique (0,075, 0,82, 0,165, 1);
  délai de transition: 5 s;
  couleur de fond: rouge;
  couleur: #fff;
  bordure: 0;
}
 Si vous essayez ceci dans le navigateur, vous remarquerez un délai avant que la largeur  de l'élément  ne commence à changer. Ceci est dû à la propriété et à la valeur  transition-delay  que nous avons définies.
 Voir le Pen  transition-delay  par Timi Omoyeni ( @timibadass )
 sur  CodePen . 
 Propriété de raccourci
 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:
 a:  transition-property 
 b:  transition-duration 
 c:  transition-timing-function 
 d:  transition-delay 
 Nous pouvons refactoriser notre transition existante pour travailler en utilisant cette propriété de raccourci:
 // de
.btn {
  largeur: 200 px;
  hauteur: 50px;
  propriété de transition: largeur;
  durée de transition: 2s;
  fonction de synchronisation de transition: bezier cubique (0,075, 0,82, 0,165, 1);
  délai de transition: 1 s;
  couleur de fond: rouge;
  couleur: #fff;
  bordure: 0;
}

// à
.btn {
  largeur: 200 px;
  hauteur: 50px;
  transition: largeur 2s cubique-bezier (0,075, 0,82, 0,165, 1) 1s;
  couleur de fond: rouge;
  couleur: #fff;
  bordure: 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 Pen  en utilisant la propriété raccourcie  de Timi Omoyeni ( @timibadass )
 sur  CodePen . 
 Transitions dans Vue.js
 Vue.js propose deux méthodes différentes pour 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 à enrouler le composant de transition   autour d'un élément ou d'un composant, à l'aide de l'un des éléments suivants: ce qui suit:
 rendu conditionnel (en utilisant  v-if ),
 affichage conditionnel (en utilisant  v-show ),
 composants dynamiques,
 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 (comme un booléen). Voici un exemple de la façon dont cela fonctionne, extrait du fichier  index.vue :
  
 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  afficher  lorsque vous cliquez dessus. Nous ajouterons cette page à notre fichier  App.vue  en l'important comme suit:
  
 Si nous ouvrons le navigateur, nous devrions voir notre paragraphe et bouton:
 Pour le moment, un clic sur le bouton ne modifie que la valeur de  show ce qui provoque le changement du texte visible:
 L'ajout d'une transition à ce paragraphe peut être effectué en encapsulant les deux paragraphes dans le composant de transition  . Ce composant accepte un accessoire  nommé ce 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 composant de transition  . À 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 forme de classes CSS.
 Une chose à noter est que, lors de l'utilisation d'un 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 a six classes de transition qui sont appliquées aux éléments ou composants à l'intérieur du composant de transition  et chacune de ces classes représente un état dans le processus de transition. Nous n'en examinerons que quelques-uns.
 v-enter 
 La classe  v-enter  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 prop  name  (dans ce cas,  fade ) attaché au composant de transition   est préfixé à ce nom de classe, mais sans le  v  . Ce  v  peut être utilisé par défaut si  nom  n'est pas fourni. Ainsi, nous pouvons ajouter cette classe à notre fichier  index.vue :
 Tout d'abord, nous ajoutons une couleur   de  vert  à tous les paragraphes de la page. Ensuite, nous ajoutons notre première classe de transition,  fade-name . Dans cette classe, nous changeons la couleur   en rouge, et nous utilisons la propriété  transform  et  translateY  pour déplacer le paragraphe de  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 verrons.
 v-enter-active 
 Le  La classe v-enter-active  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 que  v-enter  fonctionne car elle peut être utilisée pour ajouter la propriété 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: transformer .3s cube-bezier (1.0, 0.5, 0.8, 1.0), couleur .5s cubic-bezier (1.0, 0.5, 0.8, 1.0);
}
 Voir le Pen  vue transition enter state  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  à  cachée  n'est pas assez fluide, car aucune transition ne se produit.
 v-congé-actif 
 Le  v-congé- La classe active  représente l'état entier dans lequel un élément passe de  visible  à  caché . 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 qu'une transition  congé  soit appliquée car elle prend en compte la propriété 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: transformer 1s cube-bezier (1.0, 0.5, 0.8, 1.0), couleur 1s cubic-bezier (1.0, 0.5, 0.8, 1.0);
}
 Voir le Pen  vue transition quitter l'état actif  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. En effet, Vue.js s'attend à ce que la prochaine classe avec cette transition soit ajoutée pour qu'elle prenne effet.
 v-congé-à 
 La transition  v-congé-à  représente l'état de «sortie», 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 {
  transformer: translateX (100px);
  couleur: cyan;
}
 En cliquant sur le bouton, on remarquera que chaque élément qui sort glisse vers la droite au fur et à mesure que la couleur change.
 Voir le stylo  vue transition laisser à l'état  par Timi Omoyeni ( @timibadass )
 sur  CodePen . 
 Maintenant que nous comprenons comment les transitions fonctionnent dans Vue.js, voici une image qui rassemble tout:
 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 possède un accessoire  en mode  qui nous aide à réaliser un processus de transition très fluide. Cet accessoire accepte l'une des valeurs suivantes:
 in-out 
 Le nouvel élément transite en premier, puis, lorsqu'il est terminé, l'élément en cours transite en sortie.
 out-in 
 L'élément en cours transitions en premier, puis, une fois terminé, le nouvel élément entre en transition.
 Si nous ajoutons ce mode   à notre fichier  index.vue  et réessayons, nous devrions voir un meilleure transition:

 Maintenant, si nous cliquons sur le bouton, nous remarquerons qu'un élément sort avant qu'un autre n'entre. Ceci est le résultat du mode   que 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  de Timi Omoyeni ( @timibadass )
 sur  CodePen . 
 Liste des transitions
 Si vous essayez d'ajouter des transitions à plusieurs éléments à la fois à l'aide du composant  transition une erreur sera imprimée sur la console :
 Ceci est dû au fait que le composant de transition   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 composant  transition-group . Ce composant accepte également un accessoire  nommé mais il présente certaines différences par rapport au composant de transition  notamment les suivantes:
 Un attribut clé est requis pour chaque élément de ce composant. [19659087] Il n'est pas nécessaire de disposer du mode   car plusieurs éléments seraient rendus à la fois.
 Un élément  span  est rendu par défaut, mais il peut être modifié en spécifiant un accessoire  tag  lors de la définition du composant  transition-group . Voyons un exemple (dans notre fichier  listTransition.vue ):
      
 Ici, nous avons un tableau d'utilisateurs  que nous parcourons en utilisant  v-for affichant le nom dans notre section modèle. Pour pouvoir afficher cette liste, nous devons importer ce composant dans la page  App.vue :
  
 Notez que lorsque vous utilisez le composant  transition-group au lieu d'encapsuler notre liste avec une balise  ul  (ou toute balise que nous avons en tête), nous l'enroulons autour de la  transition-group  et ajoutez la balise à la balise   prop, comme ceci:
   
 Ici, nous avons remplacé la balise  ul  par la composante  transition-group et ajouté le  ul  comme balise   prop valeur. 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 la balise  prop  prop (c'est-à-dire,  ul ). [19659165] Balise ul mise en évidence dans les outils de développement. « />
 Nous avons également ajouté une transition  nom  prop avec 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 click à chaque bouton de la boucle et passons  user.id  à la méthode  removeUser  attachée à cet événement click. Nous créons ensuite cette fonction dans la section du script   de notre fichier. Cette fonction accepte un  id  comme argument. Ensuite, nous parcourons nos utilisateurs existants et filtrons l'utilisateur avec l'ID   passé dans cette fonction. Lorsque cela est fait, nous enregistrons notre nouveau tableau 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é.
 Voir le Pen  Transition de la liste 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é dans Vue.js. Dans Nuxt.js, le composant de transition   est automatiquement ajouté à l'application pour vous. Tout ce que vous devez faire est l'un des suivants:
 Ajouter à un composant de page individuelle
 Nuxt.js nous permet d'ajouter des transitions à un composant de page individuelle de manière transparente. Cette transition est appliquée lorsque l'utilisateur navigue vers cette page. Tout ce que nous avons à faire est d'ajouter une propriété de transition   à la section de script   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 nom par défaut   qui est attribué à une classe de transition si aucun  nom  n'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é la propriété de transition  à laquelle nous avons transmis un objet dont le nom   est réglé sur  s'estompe  et dont le mode   est défini sur  out-in . Enfin, dans la section  style nous avons ajouté des 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 remarquerions aucune transition si nous entrions manuellement cette route dans notre navigateur. Ajoutons donc un lien vers cette page sur la page  index.vue .

 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 la route  / transition .
 pageTransition 
 Ajout de transitions aux pages individuelles peut être difficile si nous voulons les ajouter à toutes les pages de l'application. C'est là qu'intervient  pageTransition . Cette propriété nous permet d'ajouter une configuration générale pour toutes nos pages dans le fichier  nuxt.config.js . Cette propriété accepte à la fois une chaîne et un objet en option. Voyons comment cela fonctionne dans  nuxt.config.js :
 export default {
    // ...
    / *
     ** CSS global
     * /
    css: [
        '~/assets/transition.css'
    ],
    pageTransition: {
        nom: "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é la propriété  pageTransition  au fichier, ainsi que sa configuration. Maintenant, créons notre fichier CSS,  transition.css et y ajoutons les styles suivants:
 .fade-enter-active {
    transition: transformer 0,3 s cube-bezier (1, 0,5, 0,8, 1), couleur 0,5 s cube-bezier (1, 0,5, 0,8, 1);
}
.fade-Leave-Active {
    transition: transformer 1s cube-bezier (1, 1, 1, 1), couleur 1s cubic-bezier (1, 0,5, 0,8, 1);
}
.fade-enter {
    couleur: bleu moyen;
    transform: translateY (20px);
}
.fade-congé-à {
    transformer: translate3d (-500px, -300px 400px);
    couleur: 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 de la page  transition.vue  et essayons de naviguer entre les deux pages, nous obtiendrons un effet de transition.
 layoutTransition 
 La  layoutTransition  ]nous permet d'appliquer des transitions en fonction de la mise en page sur laquelle se trouve la page. Il fonctionne de la même manière que  pageTraduction sauf qu'il fonctionne sur la base de la disposition  . Le nom de transition par défaut est  layout . Voici un exemple de son fonctionnement, dans  nuxt.config.js :
 export default {
    // ...
    / *
     ** CSS global
     * /
    css: [
        '~/assets/transition.css'
    ],
    layoutTransition: {
        nom: "fade",
        mode: "out-in"
    },
}
 Notez que  fondu  doit être le nom de la disposition pour que la transition fonctionne avec sa disposition. Créons cette nouvelle disposition dans  newLayout.vue  pour voir ce que je veux dire:
   
 Conclusion
 Nous avons appris les transitions CSS et comment les créer individuellement en utilisant les propriétés de transition ( transition-property  transition-duration  transition-timing -function et  transition-delay ) et en utilisant la propriété de raccourci  transition . 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 moyens pour nous d'appliquer des transitions dans une application:
 Ressources connexes
 (ks, ra, yk, il) 
 Le meilleur outil 2023 pour ta croissance Instagram ! 
 
 
 
   
 
Source link 
Partager :
Cliquez pour partager sur Twitter(ouvre dans une nouvelle fenêtre)
Cliquez pour partager sur Facebook(ouvre dans une nouvelle fenêtre)