Author: Ahmad shaded
Translator: front end Xiaozhi
Source: sitepoint

There are dreams and dry goods. Wechat search [Daqian world] pays attention to this bowl washing wisdom who is still washing dishes in the early morning.

This article GitHub https://github.com/qq449245884/xiaozhi It has been included. There are complete test sites, materials and my series of articles for the interview of front-line large factories.

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 achieve this effect by changing the opacity of the element.

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. 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: 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 is deleted) and is removed after the transition / animation is completed.

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 the opacity of the entry and exit states to be 0. Then, when our transition takes effect, we animate opacity.

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


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

Final effect:

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

Final effect:

3 – Scale Vue Router Transitions

Creating a zoom transition is very similar to our fade in 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 whole web page will make the transition look cleaner.

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

~After that, I'm washing the dishes. I'm going to wash the dishes. I'll see you next time!

The bugs that may exist after code deployment cannot be known in real time. Afterwards, in order to solve these bugs, we spent a lot of time on log debugging. By the way, we recommend a useful BUG monitoring tool Fundebug.

Original text: https://learnue.co/2021/01/4-...

communication

The article is continuously updated every week. You can search [Daqian world] on wechat to read it for the first time and reply to [welfare]. There are many front-end videos waiting for you. This article GitHub https://github.com/qq449245884/xiaozhi Already included, welcome Star.