Used a lot of dynamic effects, introduced 4 very Nice Vue routing transition dynamic effects!

Author: Ahmad Shaded by SitePoint

Have a dream, have dry goods, wechat search [big Move the world] pay attention to this in the early morning is still in the bowl washing wisdom.

In this paper, making github.com/qq449245884… Has been included, a line of large factory interview complete test sites, information and my series of articles.

Vue Router transitions are a quick and easy way to add personality to a Vue application. It allows us to add smooth animations/transitions between different pages of the application.

When used properly, it can enhance the user experience by making our applications more modern and professional.

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

Here are the four transition pages we will create.

Add Vue routing transitions to the project

Typically, the Vue router setup is as follows

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

In older versions of Vue Routers, we could simply wrap

with a
component.

However, in the new version of the Vue Router, we had to 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>
Copy the code

Each Route has a different transition

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

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

Move transition to each component

First, instead of wrapping our dynamic components with a
component, we can move
into each individual component. As follows:

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

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

Dynamic transitions using V-bind

Another approach is to bind the name of the transition to a variable. We can then dynamically change this variable based on listening routes.

<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 Router Transition, let’s look at some Nice examples.

1 — Fade Vue Router Transitions

Adding fade page transitions is probably one of the most common dynamic effects we can add to a Vue application.

This can be done by changing 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-of-in.

There are three different transition modes:

Default – The entry and exit transitions occur simultaneously
In-out – Transitions for new elements enter first. The current element then transitions out.
Out-in – The current element transitions out first. And then, the new element comes in.

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

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

There are six different transition classes (three for entry and three for departure).

V-enter-from: defines the start state of the transition. It takes effect before the element is inserted and is removed the next frame after the element is inserted.
V-leave-from: defines the start state of the exit transition. Immediately after the exit transition is triggered, the next frame is removed.
V-enter -active: defines the status when the transition takes effect. Applied throughout the transition phase, before the element is inserted and removed after the transition/animation is complete. This class can be used to define the process time, delay, and curve functions that enter the transition.
V-leave-active: defines the status when the leave transition takes effect. Applies throughout the exit transition phase, takes effect immediately when the exit transition is triggered, and removes after the transition/animation is complete. This class can be used to define exit transition process time, delay and curve functions.
V-enter -to: defines the end state of the transition. The next frame takes effect after the element is inserted (the v-enter-from is removed at the same time) and removed after the transition/animation is complete.
V-leave-to: indicates the end of a transition. The next frame takes effect after the departure transition is triggered (and the V-leave-from is deleted at the same time) and is 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 the entry and exit states to be 0. Then, animating opacity is performed when the transition is in effect.

// fade styles! .fade-enter-active,.fade-leave-active {transition: opacity 0.5s ease; } .fade-enter-from, .fade-leave-to { opacity: 0; }Copy the code

Final effect:

2 — Slide Vue Router Transitions

The next transition we’re going to build is the slide transition.

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

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

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

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

Finally, set the properties for the component to slide in the transition style. 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; }Copy the code

The end result:

3 — Scale Vue Router Transitions

Creating a zoom transition is very similar to our fade transition. Again, we set the mode to out-of-In so that we can make sure the animations are in the correct order.

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

.scale-enter-active,.scale-leave-active {transition: all 0.5s ease; } .scale-enter-from, .scale-leave-to { opacity: 0; The transform: scale (0.9); }Copy the code

Giving the entire page a black background color here will make the transition look cleaner.

4 — Combining Vue Router Transitions

There are many, many ways to create transitions but I don’t think you should just go through it and do it deliberately. Transitions should be small, subtle enhancements, not distractions to the application.

I think making a good transition is a combination of some more basic transitions.

For example, let’s combine slide zooming and zooming 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; 0.85 s help ease the transition: all; } .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

~ finish, I am brush bowl wisdom, I am going to brush bowl, we will see you next time!

The bugs that may exist after code deployment cannot be known in real time. In order to solve these bugs, I spent a lot of time on log debugging. Incidentally, I recommend a good BUG monitoring tool for youFundebug.

Original text: learnue co / 2021/01/4 – a…

Brush a bowl