模板
<template> <div id="app"> <transition :name="transition"> <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> </transition> <transition :name="transition"> <router-view v-if="!$route.meta.keepAlive"></router-view> </transition> </div> </template>js
<script> export default { name: "App", data() { return { transition: "" }; }, created(){ var uid = this.$route.query.uid; uid = uid ? uid : 1; this.my.setSession('tbk_uid',uid); }, watch: { $route(to, from) { if (to.meta.index > from.meta.index) { this.transition = "slide-left"; } else { this.transition = "slide-right"; } } }, } </script>样式
.slide-right-enter-active, .slide-right-leave-active, .slide-left-enter-active, .slide-left-leave-active { will-change: transform; transition: all 500ms; position: absolute; width:100%; height:100%; } .slide-right-enter { opacity: 0; transform: translate3d(-100%, 0, 0); } .slide-right-leave-active { opacity: 0; transform: translate3d(100%, 0, 0); } .slide-left-enter { opacity: 0; transform: translate3d(100%, 0, 0); } .slide-left-leave-active { opacity: 0; transform: translate3d(-100%, 0, 0); }转载于:https://www.cnblogs.com/xielisen/p/9544047.html
相关资源：vue页面切换过渡transition效果