Wie wird die Routing-Übergangsanimation in Vue Router implementiert?

Wie wird die Routing-Übergangsanimation in Vue Router implementiert?

Vue Router ist ein offiziell von Vue.js bereitgestelltes Routing-Management-Plug-in. Es kann die Pfade von Seiten einfach organisieren und verwalten. Es bietet auch einige Funktionen zur Verbesserung der Benutzererfahrung, wie z. B. Routing-Übergangsanimationen. Durch diese Animationseffekte kann der Seitenwechsel immer reibungsloser gestaltet werden, was den Benutzern bessere visuelle Effekte und ein interaktives Erlebnis bietet. Wie wird also die Routenübergangsanimation in Vue Router implementiert? Lassen Sie uns dies weiter unten im Detail besprechen.

Zuerst müssen wir das Vue Router-Plugin installieren und in der Vue-Instanz einführen:

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

Als nächstes müssen wir die Übergangsanimation beim Seitenwechsel in der Routing-Konfiguration definieren. Vue Router bietet zwei Hook-Funktionen zur Steuerung des Auslösezeitpunkts von Übergangsanimationen, nämlich beforeEnter und leave. Wir können diese beiden Hook-Funktionen in jedem Routing-Objekt in der Routing-Konfiguration festlegen, um die Animationseffekte beim Betreten und Verlassen zu steuern. beforeEnter和leave。我们可以在路由配置的每个路由对象中设置这两个钩子函数，来控制进入和离开时的动画效果。

首先，我们来定义页面进入时的过渡动画。在路由配置中，如果希望给某个路由对象设置进入动画，可以在该路由对象中添加beforeEnter钩子函数，并在其中使用Vue的过渡动画模块<transition>来定义动画效果。例如：

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    // 定义进入动画
    beforeEnter: (to, from, next) => {
      next(vm => {
        const el = vm.$el.getElementsByClassName('app')[0]
        el.style.transform = 'translate(0, 100%)'
        el.style.opacity = '0'
        setTimeout(() => {
          el.style.transition = 'transform 0.3s, opacity 0.3s'
          el.style.transform = 'translate(0, 0)'
          el.style.opacity = '1'
        }, 0)
      })
    }
  },
  // ...
]

在上述代码中，我们将beforeEnter钩子函数中的next函数中传入的回调函数中执行页面进入的动画效果，首先将页面元素的transform和opacity属性设置为需要的动画初始状态，然后通过setTimeout函数将动画属性设置为需要的最终状态。

接下来，我们来定义页面离开时的过渡动画。在路由配置中，如果希望给某个路由对象设置离开动画，可以在该路由对象中添加leave钩子函数，并在其中使用Vue的过渡动画模块<transition>来定义动画效果。例如：

const routes = [
  // ...
  {
    path: '/about',
    name: 'About',
    component: About,
    // 定义离开动画
    leave: (to, from, next) => {
      const el = document.getElementsByClassName('app')[0]
      el.style.transition = 'transform 0.3s, opacity 0.3s'
      el.style.transform = 'translate(0, 100%)'
      el.style.opacity = '0'
      setTimeout(next, 300)
    }
  },
  // ...
]

在上述代码中，我们通过在leave钩子函数中将页面元素的transform和opacity属性设置为需要的动画最终状态，并通过setTimeout函数延迟300毫秒后执行next

Zuerst definieren wir die Übergangsanimation beim Aufrufen der Seite. Wenn Sie in der Routing-Konfiguration die Eintrittsanimation für ein Routing-Objekt festlegen möchten, können Sie die Hook-Funktion beforeEnter zum Routing-Objekt hinzufügen und das Übergangsanimationsmodul <transition> von Vue verwenden /code> um Animationseffekte zu definieren. Zum Beispiel:

const router = new VueRouter({
  routes
})

const app = new Vue({
  router
}).$mount('#app')

Im obigen Code führen wir zuerst den Animationseffekt des Seiteneintrags in der Callback-Funktion aus, die in der next-Funktion in der beforeEnter-Hook-Funktion übergeben wird , die Seite Die Eigenschaften transform und opacity des Elements werden auf den erforderlichen Anfangszustand der Animation gesetzt, und dann werden die Animationseigenschaften über den auf den erforderlichen Endzustand gesetzt setTimeout-Funktion.

Als nächstes definieren wir die Übergangsanimation beim Verlassen der Seite. Wenn Sie in der Routing-Konfiguration eine Leave-Animation für ein Routing-Objekt festlegen möchten, können Sie die Hook-Funktion leave zum Routing-Objekt hinzufügen und das Übergangsanimationsmodul <transition> von Vue verwenden /code> um Animationseffekte zu definieren. Zum Beispiel:

rrreee

Im obigen Code setzen wir die Attribute transform und opacity des Seitenelements auf die erforderlichen Werte im leave Hook-Funktion Der Endzustand der Animation, und die Funktion setTimeout wird verwendet, um die Ausführung der Funktion next um 300 Millisekunden zu verzögern, um die Ausführung der Abgangsanimation zu steuern. 🎜🎜Schließlich müssen wir in der Vue-Instanz eine Vue-Router-Instanz erstellen und die Routing-Konfiguration übergeben: 🎜rrreee🎜Durch die oben genannten Schritte haben wir die Routing-Übergangsanimation im Vue-Router erfolgreich implementiert. Wenn wir die Seite wechseln, löst Vue Router automatisch die Übergangsanimation zum Routing-Wechsel aus, wodurch Benutzer einen reibungsloseren und cooleren Seitenwechseleffekt erzielen. 🎜🎜Zusammenfassend lässt sich sagen, dass wir durch die Verwendung der Hook-Funktion von Vue Router und des Übergangsanimationsmoduls von Vue problemlos Routenübergangsanimationen implementieren und die Benutzererfahrung verbessern können. Programmierer können verschiedene Animationseffekte entsprechend ihren eigenen Bedürfnissen und ihrer Kreativität anpassen, um die Seite lebendiger und interessanter zu gestalten. Ich hoffe, dass die Einführung dieses Artikels Ihr Verständnis der Vue-Router-Routing-Übergangsanimation vertiefen und Ihnen bei der tatsächlichen Entwicklung helfen kann. 🎜

Das obige ist der detaillierte Inhalt vonWie wird die Routing-Übergangsanimation in Vue Router implementiert?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!