Vue实现路由过渡动效的4种方法
Vue 路由过渡是对 Vue 程序一种快速简便的增加个性化效果的的方法。 可以让你在程序的不同页面之间增加平滑的动画和过渡。如果使用得当，可以使你的程序显得更加专业，从而增强用户体验。
本文中会先介绍使用 Vue 路由过渡的基础知识，然后在举几个例子，为你一些灵感。下面是其中的一个案例：
在 Vue 程序中添加路由
一般 Vue 路由设置如下所示：
<template> <router-view /> </template>
在旧版本的 Vue 路由中，我们可以简单地用 <transition> 组件包装 <router-view>。
但是，在较新版本的 Vue 路由中则必须用 v-slot 来解构 props 并将它们传递到我们的内部 slot 中。 这将包含一个动态组件，该组件被过渡组件包围。
<router-view v-slot="{ Component }">
<transition>
<component :is="Component" />
</transition>
</router-view>
为路由添加过渡
默认情况下，用 <transition> 包裹 <component> 会在你应用的每个路由上添加相同的过渡。
可以通过两种方式为每个路由自定义转场效果。
将过渡移到每个组件中
首先，不用把我们的动态组件与过渡组件包装在一起，可以将 <transition> 移动到每个单独的组件中。 像这样：
<template>
<transition>
<div class="wrapper">
<!-- -->
</div>
</transition>
</template>
依此类推，对要进行过渡的每条路由进行处理。 这样就可以通过修改过渡名称来自定义每条路由。
用 v-bind 进行动态过渡
另一个方法是将过渡的名称绑定到变量。 然后就可以根据自己的路有动态地修改这个变量。
这是 Vue 路由文档中的例子。在当前路由上用观察模式来动态设置 transitionName 变量。
<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'
}
}
现在我们了解了 Vue 路由过渡的基础知识，下面让来看一些例子。
#1 – 渐变过渡
渐变页面过渡应该是最直接的一种动效。可以通过修改元素的透明度来实现。
首先，创建一个名为 fade 过渡。需要注意的是过渡模式设置为 out-in。
总共有 3 种过渡模式：
- default：淡入和淡出过渡同时发生
- in-out：新元素首先淡入。 然后当前元素淡出。
- out-in：当前元素先淡出。 然后新元素开始淡入。
为了使新元素顺利淡入，我们需要在开始新过渡之前将当前元素删除。所以必须用 mode = "out-in"。
<router-view v-slot="{ Component }">
<transition name="fade" mode="out-in">
<component :is="Component" />
</transition>
</router-view>
<transition> 为提供了几个 CSS 类，它们能够在动画周期中被动态添加或删除。
有 6。个不同的过渡类（3 个用于淡入，3 个用于淡出）。
- v-enter-from / v-leave-from: 过渡的初始状态，过度开始后将其删除
- v-enter-active / v-leave-active: 过渡的激活状态
- v-enter-to / v-leave-to: 过渡的结束状态
我们的淡入淡出过渡有一个名为 fade-enter-from 的类。
我们希望淡入和淡出状态的透明度为 0。然后当过渡处于活动状态时，希望对透明度进行动画处理。
我们甚至不必将透明度设置为1，因为在动画制作过程中会删除 fade-enter-from 和 fade-leave-to 类。 这会使元素自己单独设置为默认透明度为 1 的动画。
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
配合一些虚拟组件，这就是最终过渡效果。
#2 – 幻灯片过渡
下一个是页面幻灯片过渡。
模板将如下。 由于希望淡入和淡出过渡同时发生，所以我们不想为过渡设置特殊的模式。
<router-view v-slot="{ Component }">
<transition name="slide">
<component :is="Component" />
</transition>
</router-view>
为了使例子更容易理解，我把每个组件的宽度都设为100％，并占用至少 1 vh，还分别设置了背景色。
.wrapper {
width: 100%;
min-height: 100vh;
}
最后过渡样式将为要滑动组件的绝对位置设置动画。如果需要不同的滑动方向，只需更改要设置的CSS属性（ top, bottom, left, right）。
.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 – 缩放过渡
缩放过渡与渐变过渡非常相似。同样需要把模式设置为 out-in，这样可以确保动画的正确顺序。
<router-view v-slot="{ Component }">
<transition name="scale" mode="out-in">
<component :is="Component" />
</transition>
</router-view>
然后用样式改变元素的透明度和 transform: scale。
.scale-enter-active,
.scale-leave-active {
transition: all 0.5s ease;
}
.scale-enter-from,
.scale-leave-to {
opacity: 0;
transform: scale(0.9);
}
为了使这个过渡看上去更干净，可以把整个网页的背景色设置为黑色。
这是最终效果：
#4 – 组合过渡
过渡的效果有很多很多，常用的做法是把一些基础的过渡结合在一起，例如把幻灯片和缩放合并为一个过渡。
<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);
}
这是最终效果
看上去还不错吧。
#5 – 写在最后
近期在提升 Vue 的过程中，发现一个高逼格的 Vue3+TS 教程。
到此这篇关于Vue实现路由过渡动效的4种方法的文章就介绍到这了,更多相关Vue 路由过渡动效 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue axios 封装请求拦截多次弹窗的问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
这篇文章主要介绍了基于ant design日期控件使用_仅月份的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
这篇文章主要介绍了vue 使用html2canvas将DOM转化为图片的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了vue的webcamjs集成方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
在一般业务中监听的最多的就是 Click 事件，但是在一些业务比如 Alert 和 Pop 效果时，需要监听在元素外部的点击来关闭弹窗。2020-11-11
这篇文章主要介绍了VUE表达式{{}}中如何拼接字符问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
这篇文章主要介绍了vue中的Key值重复问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
vite build vue3项目配置开启sourcemap方式
这篇文章主要介绍了vite build vue3项目配置开启sourcemap方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-06-06
这篇文章主要为大家介绍了Vue父子组件元素获取方法互相调用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-09-09
大前端代码重构之事件拦截iOS Flutter Vue示例分析
这篇文章主要为大家介绍了大前端代码重构之事件拦截iOS Flutter Vue示例分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
最新评论