Comment l'animation de transition de routage est-elle implémentée dans Vue Router ?

Comment l'animation de transition de routage est-elle implémentée dans Vue Router ?

Vue Router est un plug-in de gestion de routage officiellement fourni par Vue.js. Il peut facilement organiser et gérer les chemins des pages. Il fournit également certaines fonctionnalités pour améliorer l'expérience utilisateur, telles que l'animation de transition de routage. Grâce à ces effets d'animation, le changement de page peut être rendu de plus en plus fluide, offrant aux utilisateurs de meilleurs effets visuels et une expérience interactive. Alors, comment l'animation de transition d'itinéraire dans Vue Router est-elle implémentée ? Discutons-en en détail ci-dessous.

Tout d'abord, nous devons installer le plugin Vue Router et l'introduire dans l'instance Vue :

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

Vue.use(VueRouter)

Ensuite, nous devons définir l'animation de transition lors du changement de page dans la configuration de routage. Vue Router fournit deux fonctions de hook pour contrôler le moment de déclenchement des animations de transition, à savoir beforeEnter et leave. Nous pouvons définir ces deux fonctions de hook dans chaque objet de routage dans la configuration de routage pour contrôler les effets d'animation à l'entrée et à la sortie. 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

Tout d’abord, définissons l’animation de transition à l’entrée de la page. Dans la configuration du routage, si vous souhaitez définir l'animation d'entrée pour un objet de routage, vous pouvez ajouter la fonction de hook beforeEnter à l'objet de routage et utiliser le module d'animation de transition de Vue <transition> /code> pour définir les effets d'animation. Par exemple :

const router = new VueRouter({
  routes
})

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

Dans le code ci-dessus, nous exécuterons l'effet d'animation de l'entrée de page dans la fonction de rappel passée dans la fonction next dans la fonction de hook beforeEnter First. , la page Les propriétés transform et opacity de l'élément sont définies sur l'état initial requis de l'animation, puis les propriétés de l'animation sont définies sur l'état final requis via le Fonction setTimeout.

Ensuite, définissons l'animation de transition lorsque la page quitte. Dans la configuration du routage, si vous souhaitez définir une animation de sortie pour un objet de routage, vous pouvez ajouter la fonction de hook leave à l'objet de routage et utiliser le module d'animation de transition <transition> /code> pour définir les effets d'animation. Par exemple :

rrreee

Dans le code ci-dessus, nous définissons les attributs transform et opacity de l'élément de page sur ceux requis dans le leave fonction hook L'état final de l'animation, et la fonction setTimeout est utilisée pour retarder l'exécution de la fonction next de 300 millisecondes afin de contrôler l'exécution de l'animation de sortie. 🎜🎜Enfin, nous devons créer une instance Vue Router dans l'instance Vue et transmettre la configuration de routage : 🎜rrreee🎜Grâce aux étapes ci-dessus, nous avons implémenté avec succès l'animation de transition de routage dans Vue Router. Lorsque nous changeons de page, Vue Router déclenchera automatiquement l'animation de transition de changement d'itinéraire, offrant aux utilisateurs un effet de changement de page plus fluide et plus cool. 🎜🎜Pour résumer, en utilisant la fonction hook de Vue Router et le module d'animation de transition de Vue, nous pouvons facilement implémenter une animation de transition d'itinéraire et améliorer l'expérience utilisateur. Les programmeurs peuvent personnaliser divers effets d'animation en fonction de leurs propres besoins et de leur créativité pour rendre la page plus vivante et intéressante. J'espère que l'introduction de cet article pourra approfondir votre compréhension de l'animation de transition de routage Vue Router et vous apporter une aide dans le développement réel. 🎜

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!