vue页面切换动画

vue基本语法整理

条件渲染

列表渲染

vue 路由

vue路由切换动画

vue路由切换动画，是基于vue的过渡动画效果做的。

这里需要解决2个问题：
1.监听路由的变化；
2.判断路由的行为是下一个页面还是 返回到上一个页面。
通过区分了路由行为后，我们就可以给不同的行为设计不同的动画，比如下一个页面是向左横屏滑动到下一个页面，返回的时候是向右横屏滑动到上一个页面。

解决第一个问题，通过在跟组件监听路由。代码如下：

watch: {
    $route(to, from) {
    	console.log(to,from);
    	//这里每次切换路由都会触发一次，在这里做动画逻辑
    }
  },

解决第二个问题，如何知道是路由的什么行为。
百度之后，找到了两种解决方案，一种是在路由里通过meta 传值，设定层级序号来做；
这个不推荐使用，因为页面少了我们可以排序号，如果页面很多，而且还有公用的情况，这个序号就不好维护了。

第二种是 在main.js中添加 popstate 事件。代码如下：

window.addEventListener("popstate",function(){
  router.isBack = true;
},false)

通过给router设置一个isBack属性，然后通过这个属性来判断是返回还是 下一个页面；
但是这个测试的时候有问题，因为 postate 事件会在 go方法的后面执行，这样在监听router的时候拿到的值不是最新的。所以也不推荐；

下面是我自己的思路提供大家参考：
首先在 项目跟组件 data中加个样式名字字段：transitionName:""
然后把动画样式写好，并且给路由组件设置上动画

/*
这个是避免切换的时候，两个页面都是半屏显示的问题
*/
.router{
	width:100%
}
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  will-change: transform;
  transition: all 500ms;
  position: absolute;
}
.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);
}

在watch中加入下面的代码

watch: {
    $route(to, from) {
      //如果to索引大于from索引,判断为前进状态,反之则为后退状态
      let isBack = this.$router.isBack
        console.log(isBack);
        if(isBack){
          //设置动画名称
          this.transitionName = 'slide-right';
        }else{
          this.transitionName = 'slide-left';
        }
        this.$router.isBack = false;
    }
  },

最后是在main.js里给vue原型上挂个方法，如下：

Vue.prototype.my_go = (num)=>{
  router.isBack = true;
  router.go(num);
}

在页面中调用返回上个页面（go）的时候，用my_go方法替代；
使用：

this.bqm_go(-1);

大家如果有更好的方法请留言，交流。