这边我用的是vue2及vue-router 3.x
路由
首先定义一个简单的路由
import Router from 'vue-router'
import Vue from 'vue'
Vue.use(Router)
const routes = [
{
path: "/",
component: () => import("@/components/test1"),
meta: {
index: 1 //区别是进入还是离开
}
},
{
path: "/two",
component: () => import("@/components/test2"),
meta: {
index: 2
}
},
];
const router=new Router({
routes
})
export default router
记得在main.js中挂载
App.vue
<template>
<div id="app">
<transition :name="transition" >
<router-view v-slot="{Component,route}">
<component :key="route.path" :is="Component"></component>
</router-view>
</transition>
</div>
</template>
<script>
export default {
name: 'App',
components: {
Test:()=>import('./components/test1')
},
data(){
return {
transition:'go-left'
}
},
watch:{
$route(to,from){
if(!from.meta.index)return this.transition='go-left'
if(to.meta.index>from.meta.index)this.transition='go-left' //进入
else this.transition='go-right' //离开
}
}
}
</script>
<style>
body {
margin: 0;
overflow: hidden;
}
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
/* overflow: hidden; */
overflow-y: auto;
height: 100vh;
width: 100vw;
}
#app>div {
width: 100%;
/* border: 2px solid red; */
box-sizing: border-box;
}
/* 进入ing离开ing */
.go-left-leave-active,
.go-left-enter-active,
.go-right-leave-active,
.go-right-enter-active {
position: absolute;
width: 100vw;
}
/* 进入的一瞬间 */
.go-left-enter,
.go-right-enter {
transform: translate3d(100%, 0, 0);
}
/* 离开的一瞬间 */
.go-left-leave,
.go-right-leave {
transform: translate3d(0, 0, 0);
}
/* 元素插入后生效 */
.go-left-enter-to {
animation: left-go-in 1s;
}
.go-left-leave-to {
animation: left-leave-in 1s;
}
@keyframes left-go-in {
0% {
transform: translate3d(100%, 0, 0);
opacity: 0;
}
100% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes left-leave-in {
0% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
100% {
transform: translate3d(-100%, 0, 0);
opacity: 0;
}
}
/* 元素插入后生效 */
.go-right-enter-to {
animation: right-go-in 1s;
}
.go-right-leave-to {
animation: right-leave-in 1s;
}
@keyframes right-go-in {
0% {
transform: translate3d(-100%, 0, 0);
opacity: 0;
}
100% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes right-leave-in {
0% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
100% {
transform: translate3d(100%, 0, 0);
opacity: 0;
}
}
</style>
这样就定义好了滑入和滑出的效果