vue-router transition 路由切换效果

Posted 2020-10-01 佑之以航

所需更改文件  App.vue

template结构：

<template>
<div id="app">
<div id="nav">
<router-link to="/come">Come</router-link>
</div>
<transition :name="transitionName">
<router-view class="child-view"></router-view>
</transition>
</div>
</template>

script结构：

<script>

export default {
name: ‘app‘,
data () {
return {
transitionName: ‘slide-left‘
}
},
mounted () {
},
//监听路由的路径，可以通过不同的路径去选择不同的切换效果
watch: {
‘$route‘ (to, from) {
if(to.path == ‘/‘){
this.transitionName = ‘slide-right‘;
}else{
this.transitionName = ‘slide-left‘;
}
if(to.path == ‘/come‘){
this.transitionName = ‘slide-right‘;
}else{
this.transitionName = ‘slide-left‘;
}
}
}
}
</script>

style结构：

<style>

.child-view {
margin: 300px auto;
width: 100%;
height: 100%;
transition: all .5s cubic-bezier(.55,0,.1,1);
}
.slide-left-enter, .slide-right-leave-active {
opacity: 0;
-webkit-transform: translate(30px, 0);
transform: translate(30px, 0);
}
.slide-left-leave-active, .slide-right-enter {
opacity: 0;
-webkit-transform: translate(-30px, 0);
transform: translate(-30px, 0);
}

</style>