Vue.js笔记 — 路由之间的切换动画

1、用transition元素来做动画， 通过绑定name元素来切换不同的动画

返回
    
   

2、动画样式

.view {
  padding: 50px 300px;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  transition: all 0.3s linear;
}
.slide-left-enter,
.slide-right-leave-active {
  opacity: 0;
  transform: translate(100%, 0);
}

.slide-left-leave-active,
.slide-right-enter {
  opacity: 0;
  transform: translate(-100%, 0);
}    

3、给路由添加返回的状态

import Vue from 'vue'
import Router from 'vue-router'

Router.prototype.back = false;
Router.prototype.goBack = function () {
      this.back = true;
      this.go(-1)
}

4、检测路由的改变来切换状态，

export default {
  name: "app",
    data() {
        return {
            transition: "slide-left"
        };
    },
    watch: {
        $route (to, from ) {
            var back = this.$router.back;
            if (back) { //点击了返回
                this.transition = 'slide-right'
            }else{
                this.transition = 'slide-left'
            }
            this.$router.back = false;
        }
    }

}