Shulou(Shulou.com)06/03 Report--

This article mainly explains "how to achieve four Veu routing transition dynamic effect", the content of the article is simple and clear, easy to learn and understand, now please follow the editor's train of thought slowly in depth, together to study and learn "how to achieve four Veu routing transition dynamic effect"!

Vue Router transitions are a quick and easy way to add personality to Vue applications. It allows us to add smooth animation / transitions 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 using Vue Router transition, 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 the project

In general, the Vue router settings are as follows

/ / default template

In the old version of Vue Router, we could simply wrap it in 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.

Each Route has a different transition.

By default, using wrappers will add the same transition to each route we use.

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

Move over the transition to each component section

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

/ / app.vue

We want each route to have a transition effect, and in this way, we can customize each route through the name of the transition.

Dynamic transition using v-bind

Another way is to bind the name of the transition to a variable. We can then change this variable dynamically according to the listening route.

Watch: {'$route' (to, from) {const toDepth = to.path.split ('/'). Length const fromDepth = from.path.split ('/'). Length this.transitionName = toDepth

< fromDepth ? 'slide-right' : 'slide-left' } } 现在，我们了解了Vue Router Transition 的基础知识，下面我们来看一些 Nice 的示例。 1 – Fade Vue Router Transitions 添渐隐页面过渡可能是我们可以添加到Vue应用程序中最常用的动效之一。 我们可以通过更改元素的opacity 来实现此效果。 首先，我们创建一个带有fade名称的 Vue Router transition。还要注意的另一件事是，我们将过渡模式设置为 out-in。 有三种不同的过渡模式: default – 进入和离开过渡同时发生 in-out – 新元素的过渡先进入。然后，当前元素过渡出去。 out-in - 当前元素先过渡出去。然后，新元素过渡进来。 为了让新元素平滑地淡入，我们需要在开始新的过渡之前删除当前元素。所以我们使用 mode="out-in"。 为我们提供了几个CSS类，它们在动画周期中被动态添加/删除。 有6个不同的过渡类(3个用于进入，3个用于离开)。 鸿蒙官方战略合作共建--HarmonyOS技术社区 v-enter-from：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。 v-leave-from：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。 v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。 v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。 v-enter-to：定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter-from 被移除)，在过渡/动画完成之后移除。 v-leave-to：离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave-from 被删除)，在过渡/动画完成之后移除。 注意:当我们为过渡提供一个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 为了让例子更好看，我们给每个页面加上下面的样式： // 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

Creating a zoom transition is very similar to our fade-in transition. We set the mode to out-in again so that we can make sure that the animation is in the correct order.

/ / scale transition! .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 page will make the transition look cleaner.

4-Combining Vue Router Transitions

There are many ways to create a transition, but I don't think we should go too far and deliberately make the transition. The transition effect should be small, subtle enhancements, rather than distractions from the application.

I think to achieve a better transition is to combine some of the more basic transitions.

For example, let's zoom in and out of the slide into a single transition.

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

Thank you for your reading. The above is the content of "how to achieve the transition effect of four Veu routes". After the study of this article, I believe you have a deeper understanding of how to achieve the transition effect of four Veu routes, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.