下面就来实现vue路由切换动画
在APP.vue里面
<transition :name="transitionName">
<router-view></router-view>
</transition>
script
export default {
data(){
return {
transitionName:''
}
},
watch: {//使用watch 监听$router的变化
$route(to, from) {
if(to.path !=='/recommendMusic' &&
to.path !=='/newsMV' &&
(to.path !=='/searchMusic' || from.path =='/none') &&
to.path !=='/newsMusic'){
//如果to索引大于from索引,判断为前进状态,反之则为后退状态
if(to.meta.index > from.meta.index){
//设置动画名称
this.transitionName = 'slide-left';
}else{
this.transitionName = 'slide-right'
}
}
else{
this.transitionName =""
}
}
}
}
特别解释
if(to.path !=='/recommendMusic' &&
to.path !=='/newsMV' &&
(to.path !=='/searchMusic' || from.path =='/none') &&
to.path !=='/newsMusic'){
这一段啥意思呢,就是我路由index.js定义的path路径嘛,就是下面那几个首页,熟人,+,消息的path地址,因为点击下面几个是不让它有动画效果的,所以加一个判断,from.path == ‘/none’,这个是当我从一个路由页面,返回到这个主页面的时候,由于我设置了主页面没有动画,但是我们想让它返回到这个页面的时候有动画,所以加一个||,’/none’就是我们要从这个页面跳转到主页面的路由地址,这样它返回主页的时候就有动画效果了,而且不影响下面4个路由的切换
css
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
will-change: transform;
transition: all 300ms;
position: absolute;
}
.slide-right-enter {
transform: translate3d(-70%, 0, 0);
}
.slide-right-leave-active {
transform: translate3d(100%, 0, 0);
}
.slide-left-enter {
transform: translate3d(100%, 0, 0);
}
.slide-left-leave-active {
transform: translate3d(0, 0, 0);
}
路由index.js里面
{
path : '/none',
component:none,
meta:{index:2
}
},
效果我感觉跟淘宝切换效果差不多了,点击详情页,详情页从右往左进入页面,并且当前页面保持固定,当返回时候,详情页再从左往右返回,下面几个切换的demo也没设置动画效果