vue路由切换的动画 vue

原理：在定义路由时添加meta属性，定义index，然后在页面监听路由，根据index的大小决定添加哪种动画，
具体：

{ path: '/', name:'home', component: Home, meta: { index: 1 }, }, { path: '/search', name: 'search', component: Search, meta: { index: 2 },},

使用

默认动画

data () { return{ transitionName: 'slide-left'} },

监听路由

watch: { $route(to, from) { // console.log(to.meta.index,from.meta.index) if (to.meta.index > from.meta.index) { this.transitionName = "slide-left"; } else { this.transitionName = "slide-right"; } } }，

定义路由动画

@import './src/style/reset.scss'; .child-view { position: absolute; width:100%; transition: all .4s ; } .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); }

【vue路由切换的动画】