How is routing transition animation implemented in Vue Router?

How is routing transition animation implemented in Vue Router?

Vue Router is a routing management plug-in officially provided by Vue.js. It can easily organize and manage the paths of pages. It also provides some features to enhance user experience, such as routing transition animation. Through these animation effects, page switching can be made smoother and smoother, giving users better visual effects and interactive experience. So, how is the route transition animation in Vue Router implemented? Let’s discuss this in detail below.

First, we need to install the Vue Router plug-in and introduce it into the Vue instance:

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

Vue.use(VueRouter)

Next, we need to define the transition animation when switching pages in the routing configuration. Vue Router provides two hook functions to control the triggering timing of transition animations, namely beforeEnter and leave. We can set these two hook functions in each routing object in the routing configuration to control the animation effects when entering and leaving.

First, let’s define the transition animation when the page enters. In the routing configuration, if you want to set the entry animation for a routing object, you can add the beforeEnter hook function to the routing object and use Vue's transition animation module<transition></transition> to define animation effects. For example:

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)
      })
    }
  },
  // ...
]

In the above code, we will execute the animation effect of page entry in the callback function passed in the next function in the beforeEnter hook function. First, Set the transform and opacity properties of the page element to the required initial state of animation, and then set the animation property to the required final state through the setTimeout function.

Next, let’s define the transition animation when the page leaves. In the routing configuration, if you want to set a leave animation for a routing object, you can add the leavehook function to the routing object and use Vue's transition animation module<transition></transition> to define animation effects. For example:

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)
    }
  },
  // ...
]

In the above code, we set the transform and opacity properties of the page element to the required value in the leave hook function The final state of the animation, and the setTimeout function is delayed for 300 milliseconds and then the next function is executed to control the execution of the leaving animation.

Finally, we need to create a Vue Router instance in the Vue instance and pass in the routing configuration:

const router = new VueRouter({
  routes
})

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

Through the above steps, we have successfully implemented the routing transition animation in Vue Router . When we switch pages, Vue Router will automatically trigger the route switching transition animation, giving users a smoother and cooler page switching effect.

To sum up, by using Vue Router’s hook function and Vue’s transition animation module, we can easily implement routing transition animation and improve user experience. Programmers can customize various animation effects according to their own needs and creativity to make the page more lively and interesting. I hope that the introduction of this article can deepen your understanding of Vue Router routing transition animation and bring you some help in actual development.

The above is the detailed content of How is routing transition animation implemented in Vue Router?. For more information, please follow other related articles on the PHP Chinese website!