Transition Routes

With the combination of the router-element component from Vue Router and the transition component, we can easily set up the transition effects when a user navigates from one URL (route) to another.

To give you a more fundamental understanding, we demonstrate in the following section an underlying case where a user redirects from the home page to the about page on a website.

Let's wrap router-element with transition and add the name="zoom" attribute:

<transition
  name="zoom"
  mode="out-in"
>
  <router-view/>
</transition>

Here we will use the mode attribute to indicate the transition mode. There are currently two modes to set:

• in-out: The new element comes in first, and only after that will the current element go out of view.
• out-in: The current element goes out first, and only then will the new element come in. We will use this for our example, and it&apos...