La puissance des transitions nommées dans Vue

Vue.js fournit une variété de façons de contrôler comment les éléments ou les composants sont rendus visuellement lorsqu'ils sont insérés dans DOM, comme la décoloration, le glissement ou d'autres effets visuels. Presque toutes ces fonctionnalités sont basées sur un seul composant: le composant de transition .

Un exemple simple est v-if basé sur une valeur booléenne. Lorsque le booléen est vrai, l'élément apparaît; Quand il est faux, l'élément disparaît. Habituellement, cet élément apparaît et disparaît soudainement, mais avec le composant de transition, vous pouvez contrôler les effets visuels.

<transition><div v-if="isVisible"> Est-ce visible?</div></transition>

De nombreux articles fournissent une bonne introduction aux composants de transition, tels que ceux de Sarah Drasner, Nicolas Udy et Hassan Djirdeh. Chaque article détaille différents aspects de la composante de transition Vue. Cet article se concentrera sur un aspect des composants de transition: ils peuvent être "nommés".

<transition name="fade"><div v-if="isVisible"> Est-ce visible?</div></transition>

Le changement initial provoqué par cette propriété est que la classe CSS injectée dans un élément pendant la séquence de transition sera préfixée avec le nom donné. Fondamentalement, il sera fade-enter au lieu de v-enter ci-dessus. Cette propriété unique a bien plus que cette simple option. Il peut être utilisé pour profiter de certaines caractéristiques de Vue et CSS pour produire des résultats intéressants.

Une autre chose à considérer est que l'attribut de nom peut être lié:

<transition :name="currentTransition"><div v-if="isVisible"> Est-ce visible?</div></transition>

Dans cet exemple, la transition sera nommée comme la valeur analysée par currentTransition . Ce changement simple fournit une autre couche d'options et de fonctionnalités pour l'animation de l'application. En utilisant des transitions de dénomination statiques et dynamiques, les projets peuvent avoir une série de transitions prédéfinies prêtes à être appliquées dans toute l'application, peuvent étendre les composants appliqués à leurs transitions existantes, les transitions de commutation utilisées avant ou après l'application, permettre aux utilisateurs de sélectionner les transitions et de contrôler la façon dont les éléments individuels de la transition de la liste en place en fonction de l'état actuel de la liste.

Cet article vise à explorer ces fonctionnalités et à expliquer comment les utiliser.

Que se passe-t-il lors de la dénomination des transitions?

Par défaut, lors de l'utilisation du composant de transition, il applique des classes spécifiques aux éléments dans un ordre spécifique. Ces classes peuvent être utilisées dans CSS. Sans CSS, ces classes n'ont en fait aucun effet sur les éléments. Par conséquent, CSS de cette nature est nécessaire:

 .ventre,
.v-leave-to {
  Opacité: 0;
}

.v-enter-actif,
.v-leave-activ {
  transition: 0,5 s;
}

Cela fait que l'élément s'estompe dans et à l'extérieur pendant une durée d'une demi-seconde. Les légers modifications de la transition fournissent aux utilisateurs des commentaires visuels élégants. Cependant, il y a encore un problème à considérer. Mais d'abord, quelle est la différence entre les transitions de dénomination?

 .fade-enter,
.fade-leave-to {
  Opacité: 0;
}

.fade-enter-active,
.fade-leave-active {
  transition: 0,5 s;
}

Fondamentalement, le même CSS, mais en utilisant fade- comme préfixe au lieu de v- . Cette dénomination résout les problèmes qui peuvent survenir lors de l'utilisation du nom de classe par défaut du composant de transition. v- rend réellement la classe globale, en particulier lors de la mise en place de CSS dans un bloc de style au niveau de la racine de l'application. Cela fera en fait les transitions * toutes * sans l'attribut de nom dans toute l'application utilise le même effet de transition. Pour les applications plus petites, cela peut suffire, mais dans des applications plus grandes et plus complexes, cela peut conduire à de mauvais visuels, car tout ne devrait pas disparaître en une demi-seconde.

La transition de dénomination fournit aux développeurs des niveaux de contrôle tout au long de leur projet sur la façon d'insérer ou de supprimer visuellement différents éléments ou composants. Il est recommandé que toutes les transitions soient nommées - même si une seule - pour développer l'habitude de le faire. Même si l'application n'a qu'un seul effet de transition, un nouvel effet de transition peut être ajouté à l'avenir. Les transitions existantes ont été nommées dans le projet, ce qui simplifie l'effort pour ajouter de nouvelles transitions.

Construire un ensemble d'effets de transition

Les transitions de dénomination fournissent un processus simple mais très utile. Une pratique courante pourrait être de créer des classes de transition dans le cadre des composants qui les utilisent. Si une autre pratique courante des styles de composants portée est terminée, ces classes ne seront disponibles que pour ce composant particulier. Si deux composants différents ont des transitions similaires dans leurs blocs de style, nous répétons simplement le code.

Envisageons donc de garder le CSS de transition dans le bloc de style du répertoire racine de l'application, généralement app.vue . Dans la plupart de mes projets, je les ai mis dans la dernière partie du bloc de style pour une recherche facile pour l'ajustement et l'ajout. Enregistrez CSS à cet emplacement afin que l'effet de transition puisse être utilisé pour chaque utilisation du composant de transition à travers l'application. Voici quelques exemples de certains de mes projets.

 .fade-enter,
.fade-leave-to {opacity: 0; }
.fade-enter-active,
.fade-leave-activ {transition: 0,5S; }

.slide-enter {
  Opacité: 0;
  Transformer: Scale3d (2, 0,5, 1) traduire3d (400px, 0, 0);
}

.slide-enter-to {transform: Scale3d (1, 1, 1); }
.Slide-enter-actif,
.Slide-leave-active {Transition: 0,5 s cubic-bezier (0,68, -0,55, 0,265, 1,55); }
.Slide-leave {Transform: Scale3d (1, 1, 1); }

.slide-leave-to {
  Opacité: 0;
  Transform: Scale3d (2, 0,5, 1) traduire3d (-400px, 0, 0);
}

.rotate-enter {transform: perspective (500px) rotate3d (0, 1, 0, 90deg); }
.rotate-enter-actif,
.rotate-leave-active {transition: 0,5S; }
.rotate-leave-to {transform: perspective (500px) rotate3d (0, 1, 0, -90deg); }

Selon vos préférences et vos besoins de projet, il existe plusieurs façons de stocker ces cours de transition. Le premier, comme mentionné précédemment, est de tout sauver dans le bloc de style du fichier app.vue . Vous pouvez également enregistrer toutes les parties SASS en transition du projet dans le dossier Assets du projet et l'importer dans le bloc de style de l'application.

 @IMPORT "Assets / _Transitions.scss";

Cette méthode permet de modifier et d'ajouter des collections de transition en dehors des fichiers VUE. Un autre avantage de cette configuration est que si le projet partage les effets de transition, vous pouvez facilement transférer ces fichiers entre les projets. Si un projet obtient une nouvelle transition, il est facile de transférer le contenu ajouté à un autre projet sans toucher le fichier de projet principal.

Si vous utilisez CSS au lieu de SASS, vous pouvez inclure le fichier comme dépendance pour votre projet. Vous pouvez le faire en enregistrant le fichier dans le dossier Assets de votre projet et en plaçant une instruction require dans le fichier main.js

 require ("@ / actifs / transitions.css");

Une autre option consiste à enregistrer le style de transition dans un fichier CSS statique, qui peut être stocké ailleurs, soit dans le dossier public du projet, soit directement sur le serveur. Puisqu'il s'agit d'un fichier CSS ordinaire, il n'est pas nécessaire de créer ou de déployer - incluez simplement une référence de lien dans le fichier index.html .

<link href="/css/transitions.css" rel="stylesheet" type="text/css">

Ce fichier peut également être potentiellement stocké dans un CDN pour partager tous les projets. Chaque fois que le fichier est mis à jour, les modifications sont immédiatement disponibles dans tous les endroits où il est référencé. Si un nouveau nom de transition est créé, le projet existant peut commencer à utiliser un nouveau nom selon les besoins.

Maintenant, ralentissons une minute

Lorsque nous construisons une collection de transition à utiliser tout au long de notre projet, considérons les utilisateurs qui ne veulent pas que l'animation soit trop soudaine ou ne veut pas que l'animation apparaisse du tout. Certains peuvent penser que nos animations sont trop exagérées et inutiles, mais pour certains, ils peuvent en fait causer des problèmes. Il y a quelque temps, WebKit a introduit des requêtes médiatiques prefers-reduced-motion pour aider à résoudre d'éventuelles barrières de spectre vestibulaire . Eric Bailey a également publié une bonne introduction aux requêtes médiatiques.

Dans la plupart des cas, il est très facile d'avoir des requêtes multimédias dans le cadre de notre ensemble de transition et doit être envisagée. Nous pouvons réduire la quantité d'exercice impliquée dans la transition pour réduire l'impact négatif, ou simplement les désactiver.

Voici un exemple simple de l'une de mes démos:

 .Next-enter {
  Opacité: 0;
  Transformer: Scale3d (2, 0,5, 1) traduire3d (400px, 0, 0);
}

.Next-enter-to {transform: Scale3d (1, 1, 1); }
.Next-enter-actif,
.Next-leave-activ {transition: 0,5 s cubic-bezier (0,68, -0,55, 0,265, 1,55); }
.Next-leave {Transform: Scale3d (1, 1, 1); }

.Next-leave-to {
  Opacité: 0;
  Transform: Scale3d (2, 0,5, 1) traduire3d (-400px, 0, 0);
}

/ * Utilisez des transitions plus simples si l'animation est réduite au niveau du système d'exploitation * /
Écran @Media et (préfère le mouvement réduit: réduire) {
  .Next-enter {
    Opacité: 0;
    Transform: tradlate3d (100px, 0, 0);
  }

  .Next-enter-actif,
  .Next-leave-activ {transition: 0,5S; }

  .Next-leave-to {
    Opacité: 0;
    Transform: tradlate3d (-100px, 0, 0);
  }
}

Dans cet exemple, j'ai pris une transition plutôt exagérée et je l'ai rendue plus simple. L'animation est une animation coulissante qui se déplace vers la gauche avec un effet de soulagement élastique, puis se rétrécit et s'estompe lorsqu'il est supprimé. Si la préférence de mouvement réduite de quelqu'un est définie, l'animation devient une transition plus simple, avec une distance plus courte (ce qui la rend plus lente) et continue de disparaître. Si nous voulons les désactiver, nous devons simplement nous référer à la classe avec l'attribut transition et définir leurs valeurs à none .

Pour tester cela, vous devez trouver et sélectionner une case à cocher sur vos systèmes d'exploitation respectifs. Sur Windows, vous pouvez le trouver dans<kbd>控制面板> 易于访问中心> 使计算机更容易查看</kbd>; Recherchez "Fermer toutes les animations inutiles (si possible).". Sur un Mac, vérifiez<kbd>系统偏好设置> 辅助功能> 显示</kbd>; Trouvez "réduire les sports". Les derniers appareils iOS ont des paramètres similaires sous<kbd>辅助功能</kbd>.

Gardons les ensembles de transition flexibles

Avec cet ensemble de transition, il peut y avoir des problèmes de inflexibilité. Par exemple, que se passe-t-il si un élément a besoin d'un temps de décoloration légèrement plus lent? En supposant que tout le reste dans l'effet peut être laissé inchangé, il suffit de changer transition-duration . Il existe des moyens de s'ajuster sans créer un nom de transition complètement nouveau.

Le moyen le plus simple consiste à utiliser les styles en ligne directement sur les éléments de la composante de transition.

<transition name="fade"><div style="transition-duration: 6s;" v-if="isVisible"> Cela a des durées différentes</div></transition>

De tels changements peuvent être effectués grâce à diverses méthodes de gestion des styles et classes fournies par Vue.

Supposons que vous utilisez des éléments de composant avec is pour effectuer des composants dynamiques, par exemple:

<transition mode="out-in" name="fade"><component :is="currentComponent"></component></transition>

Même avec ce composant dynamique, nous avons des options pour ajuster les propriétés de l'effet de transition. De même, nous pouvons appliquer un style en ligne sur l'élément composant, qui sera placé sur l'élément racine du composant. L'élément racine reçoit également des classes de transition, nous allons donc remplacer directement ses propriétés.

<transition mode="out-in" name="fade"><component :is="currentComponent" style="transition-duration: 6s;"></component></transition>

Une autre option consiste à passer les accessoires à nos composants. De cette façon, les modifications dont il a besoin peut être appliquée à son élément racine via le code du composant.

<transition mode="out-in" name="fade"><component :is="currentComponent" duration="6s"></component></transition>

<template><div :style="`transition-duration: ${duration}`"> Composant</div></template>
<script>
export default {
  name: "component-one",
  props: {
    duration: String
  }
};
</script>

Nous pouvons également remplacer les propriétés des classes de transition à l'intérieur des blocs de style composant, en particulier lors de leur portée.

 .fade-enter-active,
.fade-leave-activ {durée de transition: 1s; }

Dans ce cas, la durée de fondu de la composante sera une seconde, plutôt que la durée globale d'une demi-seconde. Nous pouvons même aller plus loin et définir différentes durées pour chaque côté de la séquence.

 .fade-enter-active {durée de transition: 1s; }
.fade-leave-activ {durée de transition: 2s; }

Toute classe de transition globale peut être modifiée dans le composant selon les besoins. Bien que cela ne soit pas aussi flexible que le changement de propriétés en dehors de la structure des classes, il est toujours très utile dans certains cas.

Comme vous pouvez le voir, même avec notre collection de transition prédéfinie, nous avons toujours la possibilité d'être flexible.

Transition dynamique

Même après que nous puissions faire toutes ces choses intéressantes avec la composante de transition de Vue, une autre fonctionnalité intéressante attend toujours d'être explorée. La propriété de nom sur le composant de transition peut être dynamique, ce qui signifie que nous pouvons modifier la transition actuellement utilisée à volonté.

Cela signifie que les transitions peuvent être modifiées en fonction de différentes situations du code pour avoir des effets d'animation différents. Par exemple, nous pouvons modifier la transition en fonction des réponses à la question, décider de la transition en fonction de l'interaction utilisateur et demander à la liste d'utiliser différentes transitions en fonction de l'état actuel de la liste elle-même.

Regardons ces trois exemples.

Exemple 1: modifiez la transition en fonction de la réponse

Dans cet exemple, nous avons un problème mathématique simple à répondre. Choisissez deux nombres au hasard et nous devons en fournir la somme. Cliquez ensuite sur le bouton pour comparer la réponse à la réponse attendue. Une petite notification apparaîtra au-dessus de l'équation indiquant si la réponse est vraie ou fausse. Si la réponse est correcte, la notification fournit une suggestion hochant la tête pour indiquer une transition positive de l'animation de haut en bas. Si votre réponse est incorrecte, la notification se déplacera à gauche et à droite, indiquant un tremblement de la tête et de la négation.

La logique derrière elle n'est pas compliquée et le réglage de la transition n'est pas compliqué. C'est HTML:

<transition :name="currentTransition"><div v-if="answerChecked"> {{ réponse }}</div></transition>

La nature est assez simple. Nous avons un nom lié sur la transition, puis un v-if sur le div de notification. Nous avons également appliqué une classe vraie ou fausse pour décorer les notifications basées sur les réponses.

Voici le CSS de transition:

 .Positive-enter-active {animation: positif 1s; }
@keyframes positif {
  0% {transform: tradlate3d (0, 0, 0); }
  25% {transform: tradlate3d (0, -20px, 0); }
  50% {transform: tradlate3d (0, 20px, 0); }
  75% {transform: tradlate3d (0, -20px, 0); }
  100% {transform: tradlate3d (0, 0, 0); }
}

.Négative-enter-active {Animation: négatifs 1s; }
@keyframes négatif {
  0% {transform: tradlate3d (0, 0, 0); }
  25% {transform: tradlate3d (-20px, 0, 0); }
  50% {transform: tradlate3d (20px, 0, 0); }
  75% {transform: tradlate3d (-20px, 0, 0); }
  100% {transform: tradlate3d (0, 0, 0); }
}

Vous verrez que j'utilise des animations CSS pour réaliser des effets de haut en bas et de gauche et de droite.

Voici un code JavaScript:

 Méthodes: {
  Randomproblem: function () {
    this.a = math.floor (math.random () * math.floor (10));
    this.b = math.floor (math.random () * math.floor (10));
  },
  vérifier: function () {
    this.Response = this.a this.b === parseInt (this.answer);
    this.answerchecked = true;
    this.currentTransition = this.Response? «positif»: «négatif»;
  },
  reset: function () {
    this.answer = null;
    this.answerchecked = false;
    this.randomproblem ();
  }
}

Voici la méthode randomProblem pour définir notre équation. La méthode check détermine l'effet de transition à utiliser en fonction de la comparaison de la réponse fournie avec la bonne réponse. Ensuite, il y a la méthode reset simple, qui réinitialise tout.

Ce n'est qu'un exemple simple. Un autre exemple possible est une notification avec deux effets différents selon que la notification est importante ou non. Si le message n'est pas très important, nous pouvons utiliser une animation subtile qui ne laissera pas les yeux de l'utilisateur quitter la tâche actuelle. Si cela compte, nous pouvons utiliser des animations plus directes pour forcer l'œil à rechercher des notifications.

Exemple 2: Modifiez la transition en fonction de l'interaction utilisateur

Une autre chose que nous pouvons construire est une sorte de carrousel. Il pourrait s'agir d'une présentation de diapositives, d'une galerie d'images ou d'une série d'instructions. L'idée de base est que nous devons présenter des informations aux utilisateurs dans l'ordre. Dans cette démonstration, l'utilisateur peut décider quand continuer et s'il faut avancer ou vers l'arrière.

Il s'agit également d'une configuration assez simple. Cet exemple est plus ou moins un cas de type de présentation de diapositive. Les deux boutons en bas basculent entre deux composants avec des transitions coulissantes. Un vrai projet aura plus de composants, ou peut modifier la logique du contenu des composants, selon la diapositive actuelle. Cet exemple restera simple pour démontrer l'idée.

C'est HTML:

<transition :name="currentTransition" mode="out-in"><component :is="slides[currentSlide]"></component></transition>

Vous verrez que chaque fois que le composant est commuté à travers la liaison is un attribut sur l'élément de composant, nous faisons simplement la transition.

C'est CSS:

 .Next-enter {
  Opacité: 0;
  Transformer: Scale3d (2, 0,5, 1) traduire3d (400px, 0, 0);
}

.Next-enter-to {transform: Scale3d (1, 1, 1); }
.Next-enter-actif,
.Next-leave-activ {transition: 0,5 s cubic-bezier (0,68, -0,55, 0,265, 1,55); }
.Next-leave {Transform: Scale3d (1, 1, 1); }

.Next-leave-to {
  Opacité: 0;
  Transform: Scale3d (2, 0,5, 1) traduire3d (-400px, 0, 0);
}

.prev-enter {
  Opacité: 0;
  Transform: Scale3d (2, 0,5, 1) traduire3d (-400px, 0, 0);
}

.prev-enter-to {transform: Scale3d (1, 1, 1); }
.prev-enter-actif,
.prev-leave-active {transition: 0,5 s cube-bezier (0,68, -0,55, 0,265, 1,55); }
.prev-leave {transform: Scale3d (1, 1, 1); }

.prev-leave-to {
  Opacité: 0;
  Transformer: Scale3d (2, 0,5, 1) traduire3d (400px, 0, 0);
}

/ * Utilisez des transitions plus simples si l'animation est réduite au niveau du système d'exploitation * /
Écran @Media et (préfère le mouvement réduit: réduire) {
  .Next-enter {opacité: 0; Transform: tradlate3d (100px, 0, 0); }
  .Next-enter-actif,
  .Next-leave-activ {transition: 0,5S; }
  .next-leave-to {opacity: 0; Transform: tradlate3d (-100px, 0, 0); }

  .prev-enter {opacité: 0; Transform: tradlate3d (-100px, 0, 0); }
  .prev-enter-actif,
  .prev-leave-active {transition: 0,5S; }
  .prev-leave-to {opacity: 0; Transform: tradlate3d (100px, 0, 0); }
}

Ici, nous avons deux transitions, l'une pour le bouton "Suivant" lorsque l'utilisateur clique sur le bouton "Suivant" et l'autre pour le bouton "Précédent". Chacun utilise essentiellement transform pour faire glisser le composant dans la direction appropriée, mais il y a un supplément pour créer un effet de compression pour un effet de dessin animé. Nous utilisons également prefers-reduced-motion pour changer l'animation en un effet de fondu plus simple et le glisser un peu dans la bonne direction.

Maintenant, pour JavaScript:

 Méthodes: {
  changelide: fonction (dir) {
    this.currentSlide = dir === 'suivant'? this.currentSlide 1: this.currentSlide - 1;
    this.currentTransition = dir;
  }
}

Chaque bouton appelle la méthode changeSlide sur son événement de clic et passe la direction qu'il représente. Ensuite, nous avons une logique pour suivre la diapositive actuelle. Contrôles de code à ligne unique qui transitionnent à utiliser. Étant donné que le bouton "suivant" passe "suivant" comme direction, il correspond à la transition "suivante" dans CSS. Il en va de même pour le bouton "Prev". Chaque fois que l'utilisateur clique sur un bouton, l'application sait automatiquement quelle transition utiliser. Par conséquent, nous avons un bon effet de transition qui peut fournir un contexte sur la direction que l'utilisateur se dirige dans la séquence.

Exemple 3: Modifiez la transition en fonction de l'état de la liste

Pour notre dernier exemple, nous apprendrons à modifier la transition en fonction de l'état actuel de la liste dans transition-group . L'idée ici est une liste, chaque fois qu'un élément est mis à jour, à chaque fois en utilisant une transition différente.

Dans cet exemple, nous montrons la liste de la ville à droite et la liste vide à gauche. Lors de la sélection des villes à droite, elles remplissent les blancs à gauche. La première ville glisse d'en haut tout en s'évanouissant dans la vue. La prochaine ville avant la dernière ville glissera de la droite ou de la gauche, selon la transition précédente, la dernière ville glissera par le bas.

C'est HTML:

<transition-group :name="currentListTransition" tag="ul"><li :key="item" v-for="(item, index) in selectedItems"> {{ article }}</li></transition-group>

Comme d'habitude, une configuration assez simple. Voici les transitions dans CSS:

 .top-enter-actif,
.Top-leave-activ {transition: 0,5S; }
.top-enter,
.top-leave-to {
  Opacité: 0;
  transform: tradlate3d (0, -40px, 0);
}

.top-move {
  Opacité: 0,5;
  transition: 0,5 s;
}

.left-enter-actif,
.left-leave-activ {transition: 0,5S; }
.left-enter,
.left-leave-to {
  Opacité: 0;
  transform: tradlate3d (-40px, 0, 0);
}

.left-mouvement {
  Opacité: 0,5;
  transition: 0,5 s;
}

.Right-enter-active,
.Right-leave-activ {transition: 0,5S; }
.Right-enter,
.Right-leave-to {
  Opacité: 0;
  Transform: tradlate3d (40px, 0, 0);
}

.Right-move {
  Opacité: 0,5;
  transition: 0,5 s;
}

.Bottom-enter-actif,
.Bottom-leave-active {transition: 0,5S; }
.bottom-enter,
.bottom-leave-to {
  Opacité: 0;
  Transform: tradlate3d (0, 30px, 0);
}

.bottom-mouvement {
  Opacité: 0,5;
  transition: 0,5 s;
}

/ * Si l'animation est réduite au niveau du système d'exploitation, fermez la transition * /
Écran @Media et (préfère le mouvement réduit: réduire) {
  .top-enter-actif,
  .top-leave-activ {transition: aucun; }
  .top-move {transition: aucun; }
  .left-enter-actif,
  .left-leave-activ {transition: aucun; }
  .left-move {transition: aucun; }
  .Right-enter-active,
  .Right-leave-activ {transition: aucun; }
  .Right-move {Transition: Aucun; }
  .Bottom-enter-actif,
  .Bottom-leave-active {transition: aucun; }
  .bottom-move {transition: aucun; }
}

Comme vous pouvez le voir, chaque direction de la ville possible apparaît dans la liste des blancs avec une transition.

Maintenant, pour notre javascript:

 Méthodes: {
  choosecity: function (index) {
    Selt selectedLength = this.selectedItems.Length;
    Soit CitiesLength = this.cités.length;
    Soit clt = this.currentListTransition;

    if (selectedLength === 0) {
      clt = 'top';
    } else if (selectedLength> 0 && selectedLength <citieslength clt="clt" autre this.currentlisttransition="clt;" this.selecteditems.push this.cities.splice><p> La méthode <code>chooseCity</code> gère ce qui se passe lors de la sélection de chaque ville. Ce qui nous concerne principalement, c'est une série d'instructions <code>if</code> et <code>if/else</code> au milieu de la méthode. Lorsqu'une ville est sélectionnée, la logique examine la longueur actuelle du tableau <code>selectedItems</code> qui finit par pousser la ville sélectionnée. Si la longueur est nul, c'est la première ville, donc la transition devrait la faire entrer par le haut. Si la longueur est entre zéro et le nombre total de listes de villes, la transition doit être droite ou gauche. La nouvelle direction utilisée est basée sur la direction de la direction de transition précédente. Ensuite, enfin, si nous sélectionnons la dernière ville, cela passera à la transition inférieure. Encore une fois, nous utilisons <code>prefers-reduced-motion</code> , qui ferme complètement la transition dans ce cas.</p>
<p> Une autre option pour modifier la transition de la liste consiste à apporter des modifications en fonction du type de l'élément sélectionné; Par exemple, les villes de la côte est et de la côte ouest, chaque ville a une transition différente. Envisagez de modifier la transition en fonction du nombre actuel d'éléments ajoutés à la liste; Par exemple, une transition différente pour cinq éléments.</p>
<h3 id="Au-revoir-merci-pour-toutes-les-transitions"> Au revoir, merci pour toutes les transitions</h3>
<p> Après tous ces exemples et idées, j'espère que vous envisagerez de profiter de la composante de transition de Vue dans votre propre projet. Explorez les possibilités d'ajouter des transitions et des animations à votre application pour fournir un contexte et des intérêts à vos utilisateurs. Dans de nombreux cas, ces ajouts sont très faciles à mettre en œuvre, presque au point où il est dommage de ne pas les ajouter. Vue fournit une fonctionnalité excitante et très utile à l'extérieur, la composante de transition, que je ne peux qu'encourager.</p>
<p> acclamations.</p></citieslength>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!