Vue实现路由的转场动画 Vue内置动画
其实在我们平时写移动端的项目的时候,产品经常会要求我们提升用户体验,
让我们制作动画,这次使用的是Vue的内置动画
要解决的问题就是
- 首先是判断我是要进入还是要撤出
- 实现这个左右的动画跳转
首先我们需要给每一个页面定义一个层级的顺序,决定他们到底是左滑还是右滑
上代码!!!
const routes = [
{
path: '/',
name: 'home',
component: () => import('../views/home/Home.vue'),
meta:{
index:1 //判断index来决定页面的层级
},
children:[
{
path:'index',
component: () => import("../components/index/HomeIndex"),
meta:{
index:1
}
},
{
path:'shopcar',
component: () => import( "../views/ShopCar"),
meta:{
index: 2
}
},
{
path: 'my',
component: ()=> import("../views/My/My"),
meta:{
index:3
}
},
{
path:'/',
redirect:'/index'
}
]
},
]
层级决定完之后我们需要在页面上进行判断了
然后我们可以在vue的文件这样写
<template>
<div id="app">
<!-- 动态绑定他的name -->
<transition :name="animate">
<router-view class="Router"></router-view>
</transition>
</div>
</template>
<script>
export default {
data(){
return{
animate:''
}
},
//要使用watch监听来判断路由是否有改变
watch: {
$route(to, from) {
//可以打印一下to 和 from 来看一下他们里面meta设置的index层级
console.log(to,from)
//判断进入的路由层级是否比要进入的路由层级大
if(to.meta.index > from.meta.index){
//设置动画名称
this.animate= 'slide-left';
}else{
this.animate= 'slide-right';
}
}
}
}
</script>
<style lang="less">
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.Router {
position: absolute;
left: 0;
right: 0;
}
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
will-change: transform;
transition: all 800ms;
position: absolute;
}
.slide-right-enter {
opacity: 0;
transform: translate3d(-100%, 0, 0);
}
.slide-right-leave-active {
opacity: 0;
transform: translate3d(100%, 0, 0);
}
.slide-left-enter {
opacity: 0;
transform: translate3d(100%, 0, 0);
}
.slide-left-leave-active {
opacity: 0;
transform: translate3d(-100%, 0, 0);
}
</style>
这样就可以使用Vue的内置动画来实现这个了
不过要记住transition只能包裹一个router-view标签