I used a lot of animations, and introduce 4 very nice Veu routing transition animations!

Author: Ahmad shaded
Translator: Frontend Xiaozhi
Source: sitepoint

If you have dreams and dry goods, search for [Moving to the World] Follow this brushing wisdom who is still doing dishes in the early morning.

This article GitHub https://github.com/qq449245884/xiaozhi has been included, the first-line interview complete test site, information and my series of articles.

The 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, thereby enhancing the user experience.

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

Below we are going to create four transition pages.

Add the Vue routing transition to the project

Generally, the Vue router settings are as follows

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

In the old version of Vue Router , we can simply use <transition> components to package <router-view> .

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

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

Each Route has a different transition

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

There are two different ways to customize the transition for each route.

Move the transition to each component part

First of all, we can move <transition> into each individual component instead of using <transition> components to wrap our dynamic 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 method is to bind the name of the transition to a variable. Then, we can dynamically change this variable based on 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 understand the basics of Vue Router Transition, let's look at some Nice examples.

1 – Fade Vue Router Transitions

Adding fade page transition is probably one of the most commonly used animations we can add to Vue applications.

We can achieve this effect by changing the opacity

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

There are three different transition modes:

• default -the transition of entry and exit occurs simultaneously
• in-out -The transition of the new element 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, which are dynamically added/removed during the animation cycle.

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

1. v-enter-from : Define the starting state of entering the transition. It takes effect before the element is inserted, and is removed in the next frame after the element is inserted.
2. v-leave-from : Define the starting state of leaving the transition. It takes effect immediately when the exit transition is triggered, and the next frame is removed.
3. v-enter-active : Define the state when the transition takes effect. Applied throughout the transition phase, it takes effect before the element is inserted, and is removed after the transition/animation is complete. This class can be used to define the process time, delay and curve function of the entry transition.
4. v-leave-active : Define the state when the leave transition takes effect. It is applied during the entire exit transition phase, 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 the process time, delay and curve function of leaving the transition.
5. v-enter-to : Define the end state of entering the transition. The next frame takes effect after the element is inserted (at the same time v-enter-from is removed), and is removed after the transition/animation is completed.
6. v-leave-to : Leaving the end state of the transition. The next frame takes effect after the exit transition is triggered (at the same time v-leave-from is deleted), and is removed after the transition/animation is completed.

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

opacity be 0 for entering and leaving the state. Then, when our transition is in effect, opacity will animate 0607ccf12e444f.

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


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

The final effect:

2 – Slide Vue Router Transitions

The next transition we are going to build is the slide transition.

The template is shown below. Since we want the entry and exit transition to happen 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 better, we add the following styles to each page:

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

Finally, in the transition style, set the relevant properties for the component to be slid. If you need a different sliding direction, just change the CSS properties ( 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;
}

The final effect:

3 – Scale Vue Router Transitions

Creating a zoom transition is very similar to our fade transition. We set the mode to out-in again so that we can ensure the correct order of the 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);
}

Providing a black background color for the entire web page will make the transition look cleaner.

4 – Combining Vue Router Transitions

There are many ways to create transitions. However, I don’t think you should overdo it and deliberately make transitions. Transition effects should be small, subtle enhancements, rather than disturbing the application.

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

For example, let's merge slide zoom in and zoom out 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);
}

~End, I’m Shuwanzhi, I’m going to clean the dishes, see you next time!

possible BUGs that may exist after the 1607ccf12e46bf code is deployed cannot be known in real time. In order to solve these BUGs afterwards, a lot of time was spent on log debugging. By the way, I would like to recommend a useful BUG monitoring tool Fundebug .

Original: https://learnue.co/2021/01/4-awesome-of-vue-router-transitions/

communicate with

If you have dreams and dry goods, search for [Daily Move to the World] Follow this brushing wit who is still doing dishes in the early morning.

This article GitHub https://github.com/qq449245884/xiaozhi has been included, the first-line interview complete test site, information and my series of articles.