Quelles balises vue utilise-t-il pour définir les transitions

Dans Vue, les balises de transition sont utilisées pour définir des transitions ; à partir de vue2.0, les composants de transition sont pris en charge et fournis. La transition est utilisée comme balise. Si vous souhaitez ajouter un effet de transition ou une animation à un élément dans Vue, vous devez le faire. vous devez l'ajouter à l'extérieur de l'élément. Utilisez des balises de transition pour l'habillage.

L'environnement d'exploitation de cet article : système Windows 10, Vue version 2.9.6, ordinateur DELL G3.

Quelles balises vue utilise-t-il pour définir les transitions

Balises de transition :

Si vous souhaitez ajouter un effet de transition ou une animation à un élément dans Vue, vous devez envelopper l'élément avec une balise.

Changement de version :

Dans Vue1.0, la transition est prise en charge par vue en tant qu'attribut en ligne de l'étiquette. Mais dans Vue2.0. Vue a abandonné la prise en charge des anciennes propriétés et a fourni le composant de transition, qui est utilisé comme étiquette.

Transition Animation

Pour utiliser des transitions sur les composants de votre chemin et animer la navigation, vous devez utiliser l'API v-slot :

<router-view v-slot="{ Component }">
  <transition name="fade">
    <component :is="Component" />
  </transition>
</router-view>

Toutes les fonctionnalités de Transition s'appliquent également ici.

Transition pour un seul itinéraire

L'utilisation ci-dessus utilisera la même transition pour tous les itinéraires. Si vous souhaitez que chaque composant routé ait une transition différente, vous pouvez combiner les méta-informations et le nom dynamique et les placer sur  :

const routes = [
  {
    path: '/custom-transition',
    component: PanelLeft,
    meta: { transition: 'slide-left' },
  },
  {
    path: '/other-transition',
    component: PanelRight,
    meta: { transition: 'slide-right' },
  },
]
<router-view v-slot="{ Component, route }">
  <!-- 使用任何自定义过渡和回退到 `fade` -->
  <transition :name="route.meta.transition || &#39;fade&#39;">
    <component :is="Component" />
  </transition>
</router-view>

[Recommandation associée : "tutoriel vue.js" 】

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!