Vue routing transition is a quick and easy way to increase the personalized effect of Vue program. Allows you to add smooth animations and transitions between different pages of your application. If used properly, it can enhance the user experience by making your application more professional.

This article will first cover the basics of routing transitions using Vue and then give you a few examples to give you some inspiration. Here’s an example:

Add routes in the Vue program

General Vue route Settings are as follows:

<template>
  <router-view />
</template>
Copy the code

In older versions of Vue routing, we could simply wrap

with a
component.

However, in newer versions of Vue routing we have to deconstruct props with V-slot and pass them to our internal slot. This will contain a dynamic component that is surrounded by transition components.

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

Add transitions for routes

By default, wrapping < Component > with
adds the same transition to every route in your application.

You can customize the transition effect for each route in two ways.

Move transitions to each component

First, instead of wrapping our dynamic components together with our transition components, we can move
into each individual component. Like this:

<template>
  <transition>
    <div class="wrapper">
      <! -- -->
    </div>
  </transition>
</template>
Copy the code

And so on, each route to be transitioned is processed. This allows you to customize each route by changing the transition name.

Use V-bind for dynamic transitions

Another approach is to bind the name of the transition to the variable. You can then modify this variable dynamically according to your path.

This is an example from the Vue routing document. Dynamically set the transitionName variable with watch mode on the current route.

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

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

Now that we know the basics of Vue routing transitions, let’s look at some examples.

#1 — Gradient transition

Gradient page transitions should be the most direct dynamic effect. You can do this by modifying the transparency of the element.

First, create a transition called fade. Note that the transition mode is set to out-of-in.

There are three transition modes:

  1. Default: Fade-in and fade-out transitions occur simultaneously
  2. In-out: The new element fades in first. Then the current element fades out.
  3. Out-in: The current element fades out first. Then the new element starts to fade in.

In order for the new element to fade in smoothly, we need to remove the current element before starting the new transition. So you have to use mode = “out-of-in”.

<router-view v-slot="{ Component }">
  <transition name="fade" mode="out-in">
    <component :is="Component" />
  </transition>
</router-view>
Copy the code

< Transition > provides several CSS classes that can be added or removed dynamically during the animation cycle.

There are 6. Three different transition classes (three for fade-in and three for fade-out).

  • v-enter-from / v-leave-from: The initial state of the transition, which is removed after the transition has begun
  • v-enter-active / v-leave-active: Transitive activation state
  • v-enter-to / v-leave-to: End of transition

Our fade-in and fade-out transitions have a class called fade-enter-from.

We want the transparency of the fade in and fade out states to be 0. Then when the transition is active, you want to animate the transparency.

We don’t even have to set transparency to 1 because the fade-enter-from and fade-leave-to classes are removed during animation. This causes the element itself to be individually animated with a default transparency of 1.

.fade-enter-active..fade-leave-active {
  transition: opacity 0.5 s ease;
}

.fade-enter-from..fade-leave-to {
  opacity: 0;
}
Copy the code

With some virtual components, this is the final transition.

#2 — Slide transitions

The next one is the page slide transition.

The template will look like this. Since we want the fade-in and fade-out transitions to happen at the same time, we don’t want to set a special mode for the transitions.

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

To make the example easier to understand, I set each component to be 100% wide and take up at least 1 vh, and I set the background color separately.

.wrapper {
  width: 100%;
  min-height: 100vh;
}
Copy the code

Finally, the transition style sets the animation for the absolute position of the component to slide. If you need a different sliding direction, just change the CSS properties you want to set (top, bottom, left, right).

.slide-enter-active..slide-leave-active {
  transition: all 0.75 s 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;
}
Copy the code

This is the end result:

#3 — Scaling transition

The zoom transition is very similar to the gradient transition. You also need to set the mode to out-of-in to ensure the correct sequence of animations.

<router-view v-slot="{ Component }">
  <transition name="scale" mode="out-in">
    <component :is="Component" />
  </transition>
</router-view>
Copy the code

Then style the element’s transparency and transform: scale.

.scale-enter-active..scale-leave-active {
  transition: all 0.5 s ease;
}


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

To make the transition look cleaner, set the background color of the entire page to black.

This is the end result:

#4 — Combinatorial transitions

There are many, many transitions, and a common practice is to combine some basic transitions together, such as a slide and a zoom into one transition.

<router-view v-slot="{ Component }">
  <transition name="scale-slide">
    <component :is="Component" />
  </transition>
</router-view>
Copy the code
.scale-slide-enter-active..scale-slide-leave-active {
  position: absolute;
  transition: all 0.85 s 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);
}
Copy the code

This is the end result

Doesn’t look bad.

#5 — Write last

Recently, in the process of improving Vue, I found a high standard Vue3+TS tutorial. Free to share with diggers, poke me to see the tutorial