主要實現的是頁面跳轉的時候一個頁面從左邊出去,一個頁面從右邊進來,通過css3實現的,可以自己自行修改
html代碼
<template>
<div id="app">
<div class="router-parent">
<transition :name="transitionName" mode="out-in">
<router-view class="home-router"></router-view>
</transition>
</div>
</div>
</template>
js代碼
export default {
name: 'app',
data () {
return {
transitionName: 'slide-right'
}
},
components:{
},
computed: {
}
}
css代碼
.router-parent{
position: relative;
width: 100%;
height: 100%;
}
.home-router {
position: absolute;
width: 100%;
height: 100%;
transition: all .5s ease;
}
.slide-left-enter,
.slide-right-leave-active {
opacity: 0;
-webkit-transform: translate(-100%, 0);
transform: translate(-100%, 0);
}
.slide-left-leave-active,
.slide-right-enter {
opacity: 0;
-webkit-transform: translate(-100%, 0);
transform: translate(-100% 0);
}