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