Introducing 4 very nice Veu routing transition animations!

Author: Ahmad shaded
Translator: Front-end Xiaozhi
Source: sitepoint

If you have dreams and dry goods, search [Moving the World] attention to this Shawanzhi who is still washing dishes in the early morning.

This article GitHub https://github.com/qq449245884/xiaozhi has been included, and there are complete test sites, materials and my series of articles for interviews with first-tier manufacturers.

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.

Used properly, it can make our application more modern and professional, enhancing the user experience.

In today's article, we'll cover the basics of transitioning with Vue Router, followed by some basic examples, hoping to give you some inspiration and inspiration.

Below are the four transition pages we are going to create.

Add the Vue route transition to the project

Typically a Vue router setup looks like this

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

In older version Vue Router we can simply wrap <router-view> with <transition> component.

However, in newer versions of Vue Router, we have 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>

Each Route has a different transition

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

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

Move transitions to individual component sections

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

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

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 way is to bind the name of the transition to a variable. We can then 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 transitions is probably one of the most commonly used animations we can add to a Vue application.

We can achieve this effect by changing the element's opacity .

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 the new element comes in first. Then, the current element transitions out.
• out-in - The current element transitions out first. Then, the new element transitions in.

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

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

There are 6 different transition classes (3 for entering and 3 for leaving).

1. v-enter-from : Defines the start state of the transition into. Takes effect before the element is inserted, and is removed the next frame after the element is inserted.
2. v-leave-from : Defines the start state of the leaving transition. Takes effect immediately when the leave transition is triggered, and is removed the next frame.
3. v-enter-active : Defines the state when the entry transition takes effect. Applies throughout the entry transition, takes effect before the element is inserted, and is removed after the transition/animation is complete. This class can be used to define entry transition process times, delays and curve functions.
4. v-leave-active : Defines the state when the leave transition is in effect. Applied during the entire exit transition phase, takes effect immediately when the exit transition is triggered, and is removed after the transition/animation completes. This class can be used to define process times, delays and curve functions for leaving transitions.
5. v-enter-to : Defines the end state of the entry transition. Takes effect the next frame after the element is inserted (at the same time v-enter-from is removed), removed after the transition/animation is complete.
6. v-leave-to : End state of leaving transition. The next frame takes effect after the exit transition is fired (and v-leave-from is removed at the same time), removed after the transition/animation completes.

Note: This is the default name when we give the transition a name property. The format of the class is name-enter-from , name-enter-active , and so on.

We want opacity to be 0 for entering and leaving states. Then, when our transition is in effect, opacity .

// 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're going to build is the slideshow transition.

The template is shown below. Since we want the entering and leaving transitions to happen at the same time, using the default mode will do.

// 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 the relevant properties for the component to slide in the transition style. If you need a different swipe 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;
}

Final effect:

3 – Scale Vue Router Transitions

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

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

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 go overboard and do transitions on purpose. Transitions should be small, subtle enhancements, not distracting to the app.

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

For example, let's combine slide zoom in and 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 Shawanzhi, I'm going to wash the dishes, see you next time!

The bugs that may exist after the code is deployed cannot be known in real time. In order to solve these bugs afterwards, a lot of time is spent on log debugging. By the way, I 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 [Moving the World] attention to this brush bowl wisdom who is still washing dishes in the early morning.

This article GitHub https://github.com/qq449245884/xiaozhi has been included, and there are complete test sites, materials and my series of articles for interviews with first-tier manufacturers.