vue功能实现三：缓存页与非缓存页动画效果乱问题

全部的，请看https://www.jianshu.com/p/93281f5c2b38

• 在入口文件app.vue处理

// 设置data数据
isRemoveCatchPage: false,
transitionName : 'pop-' + (this.direction === 'forward' ? 'in' : 'out')
// watch监听路由状态
$route(to, from) {
    to = to || {};
    if (to.name == 'index') {
        this.transitionName = 'fade'
    } else {
        this.transitionName = 'pop-' + (this.direction === 'forward' ? 'in' : 'out');
    }
}
// 添加方法
beforeEnter: function (el) {
  el.removeAttribute("data-animation");
},
beforeLeave: function (el) {
  el.removeAttribute("data-animation");
  if(this.direction == 'reverse') {
    // 返回，添加一个比重高的样式替换缓存的样式
    el.setAttribute("data-animation", this.transitionName + "-leave-active");
  } else if(this.direction == 'forward') {
    // 前进，添加一个比重高的样式替换缓存的样式
    el.setAttribute("data-animation", this.transitionName + "-leave-active");
  }
}

• 通过样式的比重来解决动画效果错乱

提供完整的app.vue文件