主要实现的是页面跳转的时候一个页面从左边出去,一个页面从右边进来,通过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);
}