Vue Router transition is a quick and easy way to add personality to Vue applications. It allows us to add smooth animation / transition effects between different pages of the application.

If used properly, it can make our applications more modern and professional, thus enhancing the user experience.

In today's article, we will introduce the basic knowledge of transition using Vue Router, and then introduce some basic examples, hoping to give you some inspiration and inspiration.

Here are the four transition pages we want to create.

Add Vue routing transitions to your project

Typically, Vue router settings are as follows

// default template
<template>
  <router-view />
</template>

In the old version of Vue Router, we can simply wrap < router View > with < transition > components.

However, in the new version of Vue Router, we must use v-slot to deconstruct our   props  ， And pass them to our internal slots. This slow contains a dynamic component surrounded by transition.

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

Each Route has a different transition

By default, wrapping < component > with < transition > will add the same transition on each route we use.

There are two different ways to customize transitions for each route.

Move the transition to each component part

First, we can move < transition > to each individual component instead of wrapping our dynamic components with < transition > components. As follows:

// app.vue
<template>
  <transition>
    <div class="wrapper">
      <!-- -->
    </div>
  </transition>
</template>

We want each route to have a transition effect. In this way, we can customize each route by the name of the transition.

Dynamic transition using v-bind

Another way is to bind the name of the transition to a variable. Then, we can dynamically change this variable according to the listening route.

<transition :name="transitionName">
  <component :is="Component" />
</transition>

watch: {
  '$route' (to, from) {
    const toDepth = to.path.split('/').length
    const fromDepth = from.path.split('/').length
    this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
  }
}

Now that we know the basics of Vue Router Transition, let's take a look at some Nice examples.

1 – Fade Vue Router Transitions

Adding fade page transitions is probably one of the most common dynamics we can add to Vue applications.

We can change the opacity of the element   To achieve this effect.

First, we create a Vue Router transition with the name fade. Another thing to note is that we set the transition mode to   out-in.

There are three different transition modes:

• default  – Entry and exit transitions occur simultaneously
• in-out  – The transition of new elements enters first. Then, the current element transitions out.
• out-in  - The current element transitions out first. Then, new elements transition in.

In order for the new element to fade in smoothly, we need to delete the current element before starting a new transition. So we use   mode="out-in".

< transition > provides us with several CSS classes that are dynamically added / deleted during the animation cycle.

There are 6 different transition classes (3 for entry and 3 for exit).

1. v-enter-from: defines the start state of the transition. Takes effect before the element is inserted and is removed at the next frame after the element is inserted.
2. v-leave-from: defines the start state of the exit transition. Takes effect immediately when the exit transition is triggered and the next frame is removed.
3. v-enter-active: defines the state when the transition becomes effective. Applied throughout the transition phase, it takes effect before the element is inserted and removed after the transition / animation is completed. This class can be used to define the transition process time, delay and curve functions.
4. v-leave-active: defines the state when the exit transition takes effect. Applied throughout the exit transition phase, it takes effect immediately when the exit transition is triggered and is removed after the transition / animation is completed. This class can be used to define exit transition process time, delay and curve functions.
5. v-enter-to: defines the end state of the transition. After the element is inserted, the next frame takes effect (at the same time)   v-enter-from   Removed) after the transition / animation is complete.
6. v-leave-to: leave the end state of the transition. After the departure transition is triggered, the next frame takes effect (at the same time)   v-leave-from   Deleted), removed after the transition / animation is complete.

Note: This is the default name when we provide a name attribute for the transition. The format of the class is name enter from, name enter active, and so on.

We want to enter and leave the state of opacity   Is 0. Then, when our transition is in effect, yes   opacity   Process animation.

// fade styles!
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

2 – Slide Vue Router Transitions

The next transition we want to build is the slide transition.

The template is shown below. Since we want the entry and exit transitions to occur at the same time, we can use the default mode.

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

To make the example look better, we add the following styles to each page:

// component wrapper
.wrapper {
  width: 100%;
  min-height: 100vh;
}

Finally, set relevant properties for the component to slide in the transition style. If you need different sliding directions, just change the CSS property (top,   bottom,   left,   right).

// slide styles!
.slide-enter-active,
.slide-leave-active {
  transition: all 0.75s ease-out;
}


.slide-enter-to {
  position: absolute;
  right: 0;
}


.slide-enter-from {
  position: absolute;
  right: -100%;
}


.slide-leave-to {
  position: absolute;
  left: -100%;
}


.slide-leave-from {
  position: absolute;
  left: 0;
}

3 – Scale Vue Router Transitions

Creating a zoom transition is very similar to our fade in transition. We set the mode to again   Out in so that we can ensure the correct order of animation.

// scale transition!

<router-view v-slot="{ Component }">
  <transition name="scale" mode="out-in">
    <component :is="Component" />
  </transition>
</router-view>
.scale-enter-active,
.scale-leave-active {
  transition: all 0.5s ease;
}

.scale-enter-from,
.scale-leave-to {
  opacity: 0;
  transform: scale(0.9);
}

4 – Combining Vue Router Transitions

There are many ways to create transition, but I don't think we should make transition too much and deliberately. The transition dynamic effect should be small and subtle enhancements, rather than interfering with the application.

I think a better transition is to combine some more basic transitions.

For example, let's combine the zoom in and zoom out of slides into a transition.

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

.scale-slide-enter-active,
.scale-slide-leave-active {
  position: absolute;
  transition: all 0.85s ease;
}


.scale-slide-enter-from {
  left: -100%;
}


.scale-slide-enter-to {
  left: 0%;
}


.scale-slide-leave-from {
  transform: scale(1);
}


.scale-slide-leave-to {
  transform: scale(0.8);
}

If you want to develop applets or learn more about applets, you can help you meet your development needs through professional development companies: Xiamen cares about technology -Focus Xiamen applet development , APP development, website development, H5 game development