Welche Tags verwendet Vue, um Übergänge zu definieren?

In Vue werden Übergangs-Tags verwendet, um Übergänge zu definieren. Ab Vue 2.0 werden Übergangskomponenten als Tag verwendet. Wenn Sie einem Element in Vue einen Übergangseffekt oder eine Animation hinzufügen möchten Sie müssen es an der Außenseite des Elements hinzufügen. Verwenden Sie Übergangs-Tags zum Umschließen.

Die Betriebsumgebung dieses Artikels: Windows 10-System, Vue Version 2.9.6, DELL G3-Computer.

Welche Tags verwendet Vue, um Übergänge zu definieren?

Übergangs-Tags:

Wenn Sie einem Element in Vue einen Übergangseffekt oder eine Animation hinzufügen möchten, müssen Sie das Element mit einem Tag umschließen.

Versionsänderung:

In Vue1.0 wird der Übergang von Vue als Inline-Attribut des Labels unterstützt. Aber in Vue2.0. Vue hat die Unterstützung für die alten Eigenschaften eingestellt und die Übergangskomponente bereitgestellt, die als Bezeichnung verwendet wird.

Übergangsanimation

Um Übergänge für Ihre Pfadkomponenten zu verwenden und die Navigation zu animieren, müssen Sie die V-Slot-API verwenden:

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

Alle Funktionen von Transition gelten auch hier.

Übergang für eine einzelne Route

Die obige Verwendung verwendet denselben Übergang für alle Routen. Wenn Sie möchten, dass jede geroutete Komponente einen anderen Übergang hat, können Sie Metainformationen und dynamischen Namen kombinieren und unter <Übergang> platzieren:

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>

[Verwandte Empfehlung: „vue.js Tutorial“ 】

Das obige ist der detaillierte Inhalt vonWelche Tags verwendet Vue, um Übergänge zu definieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!