4 very nice Vue Router transition effects, come and collect them!

This article will introduce to you 4 very nice Veu routing transition effects. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

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

If used correctly, it can make our applications more modern and professional, thus enhancing the user experience.

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

The four transition pages we are going to create below.

Add the Vue routing transition to the project

Typically, the Vue router settings look like this

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

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

However, in the new version of Vue Router, we have to use v-slot to destructure 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, wrapped with <transition><component> will be in our Add the same transition on every route used.

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 using <transition> components to wrap our dynamic components. As follows:

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

For each route we want to have a transition effect, in 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 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 ? &#39;slide-right&#39; : &#39;slide-left&#39;
  }
}

Now that we understand the basics of Vue Router Transition, let’s look at some Nice examples.

1 – Fade Vue Router Transitions

Fade page transition is probably one of the most common animations we can add to a Vue application.

We can achieve this effect by changing the opacity of the element.

First, we create a Vue Router transition with a fade name. 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 – Transitions for new elements go in first. Then, the current element transitions out.
• out-in - The current element transitions out first. Then, new elements transition in.

In order for new elements 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/removed during the animation cycle.

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

• v-enter-from: Defines the starting state of the entry transition. It takes effect before the element is inserted and is removed on the next frame after the element is inserted.

• v-leave-from: Defines the starting state of the leave transition. It takes effect immediately when the leaving transition is triggered and is removed the next frame.

• v-enter-active: Defines the state when the entry transition takes effect. Applies throughout the transition, takes effect before the element is inserted, and removes after the transition/animation completes. This class can be used to define process times, delays and curve functions for entering transitions.

• v-leave-active: Defines the state when the leave transition takes effect. Applies throughout the exit transition, takes effect immediately when the exit transition is triggered, and removes after the transition/animation completes. This class can be used to define process times, delays and curve functions for exit transitions.

• 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), and is removed after the transition/animation is complete.

• v-leave-to: The end state of the leave transition. Takes effect the next frame after the leave transition is triggered (at the same time v-leave-from is removed), and is removed after the transition/animation completes.

注意:当我们为过渡提供一个name属性时，这是默认名称。类的格式是name-enter-from、name-enter-active，等等。

我们希望进入和离开状态的opacity 为0。然后，当我们的过渡处生效状态时，对 opacity 进行动画的处理。

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


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

最后的效果 ：

2 – Slide Vue Router Transitions

我们要构建的下一个过渡是幻灯片过渡。

模板如下所示。 由于我们希望进入和离开过渡同时发生，因此使用默认模式即可。

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

为了让例子更好看，我们给每个页面加上下面的样式：

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

最后，在过渡样式里为要滑动的组件设置相关的属性。如果需要不同的滑动方向，只需更改CSS属性（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;
}

最终的效果:

3 – Scale Vue Router Transitions

创建缩放过渡与我们的淡入过渡非常相似。 我们再次将模式设置为 out-in，以便我们可以确保动画的正确顺序。

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

这里给整个网页提供黑色的背景色会让过渡看上去更干净。

4 – Combining Vue Router Transitions

创建过渡的方式有很多很多但是，我认为不要过度过的，刻意的去做过渡。 过渡动效应该是很小的，微妙的增强功能，而不是会让应用产生干扰因素。

我认为实现较好过渡是将一些更基础的过渡结合在一起。

例如，让我们将幻灯片放大和缩小合并为一个过渡。

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

原文地址：https://learnue.co/2021/01/4-awesome-of-vue-router-transitions/

作者：Ahmad shaded

译文地址：https://segmentfault.com/a/1190000039802609

更多编程相关知识，请访问：编程视频！！

The above is the detailed content of 4 very nice Vue Router transition effects, come and collect them!. For more information, please follow other related articles on the PHP Chinese website!