4 ways to implement routing transition effects in Vue

Vue router transitions are a quick and easy way to add personalized effects to Vue programs. It allows you to add smooth animations and transitions between different pages of your application. If used properly, it can make your program appear more professional and enhance the user experience.

In this article, I will first introduce the basics of using Vue router transitions, and then give you some examples to give you some inspiration. Here is one example:

Adding Routes to a Vue Application

A typical Vue router setup looks like this:

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

In older versions of Vue Router, we could simply wrap the <router-view> with a <transition> component.

However, in newer versions of Vue router we have to use v-slot to destructure the props and pass them into our inner slot. This will contain a dynamic component surrounded by a transition component.

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

Adding transitions to routes

By default, wrapping a <component> with a <transition> will add the same transition to every route in your application.
There are two ways to customize transitions for each route.

Move the transition into each component

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

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

This process continues in this way for each route that needs to be transitioned. This allows you to customize each route by changing the transition name.

Dynamic transitions with v-bind

Another approach is to bind the name of the transition to a variable. Then you can dynamically modify this variable according to your own path.
This is an example from the Vue router documentation. Use watch mode on the current route to dynamically set the transitionName variable.

<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 understand the basics of Vue router transitions, let's look at some examples.

#1 – Gradient Transition

Gradient page transition should be the most direct animation effect. This can be achieved by modifying the transparency of the element.
First, create a transition called fade. Note that the transition mode is set to out-in.

There are 3 transition modes:

• default: fade-in and fade-out transitions occur simultaneously
• in-out: New elements fade in first. The current element then fades out.
• 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 must use mode = "out-in".

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

<transition> provides several CSS classes that can be dynamically added or removed during the animation cycle.
There are 6. different transition classes (3 for fade-in and 3 for fade-out).

• v-enter-from / v-leave-from: the initial state of the transition, which is removed after the transition begins
• v-enter-active / v-leave-active: transition activation state
• v-enter-to / v-leave-to: the end state of the transition

Our fade transition has a class called fade-enter-from.

We want the fade-in and fade-out states to have an opacity of 0. Then when the transition is active, you want the transparency to be animated.

We don't even have to set the transparency to 1 because the fade-enter-from and fade-leave-to classes are removed during the animation. This will animate the element itself to a default opacity of 1.

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

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

With some virtual components, this is the final transition effect.

#2 – Slide Transitions

Next up is the Page Slide Transition.

The template will be as follows. 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>

To make the example easier to understand, I set each component to have a width of 100% and occupy at least 1 vh, and also set the background color respectively.

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

Finally the transition style will animate the absolute position of the component being slid. If you need a different sliding direction, just change the CSS property to set ( top, bottom, left, right ).

.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;
}

This is the final result:

#3 – Zoom Transition

The scale transition is very similar to the fade transition. You also need to set the mode to out-in to ensure the correct order of animations.

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

Then use styles to change the element's opacity and transform: scale.

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


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

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

This is the final result:

#4 – Combining Transitions

There are many transition effects. A common approach is to combine some basic transitions together, such as combining slideshow and zoom into one 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);
}

This is the final effect

It looks pretty good.

#5 – Final Thoughts

Recently, while improving Vue, I found a high-end Vue3+TS tutorial.

This concludes this article about 4 ways to implement routing transition effects in Vue. For more relevant Vue routing transition effects content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!