Vue用户进行页面切换(路由跳转)时，动态改变路由的动画(transition效果)

当我们在使用Vue-Router时，为了用户有更好的视觉效果及体验，我们通常需要实现基于路由的动态过渡效果

github:https://github.com/Rise-Devin/FullStack-Product-Transport-User

在Vue中, 是基本的动态组件，所以我们可以用 组件给它添加一些过渡效果：

不了解组件效果的同学可以先看一下的功能介绍：https://cn.vuejs.org/v2/guide/transitions.html

过渡效果需要导入animate.css,可到https://daneden.github.io/animate.css/下载

如果我们只需要单纯的给定一个过渡效果时，只需要给name属性赋一个固定的值即可 或 利用enter-active-class、leave-active-class

但大多数时候我们都是需要动态改变过渡效果,这里我介绍两种实现方式，经测试都是可用的。

• 第一种: watch $route 决定使用哪种过渡

  export default {
    data () {
      return {
        transitionName: 'slide-left',
        pathList:[]
      }
    },
    watch:{
      '$route'(to,from){
        console.log(from.path)
        if(this.pathList.includes(to.path))
        {

            const index = (this.pathList.findIndex(()=>{
                return from.path
            }))
            this.pathList.splice(index,1)
            console.log(index)
            this.$router.isBack=true;
        }
        else
        {
            this.pathList.push(to.path)
            this.$router.isBack=false;
        }
        if(to.path==='/start')  // 'start'为首页
        {
            this.$router.isBack=true;
            this.pathList = []
        }
        let isBack = this.$router.isBack
        console.log(isBack)
         console.log(this.pathList)
        if (isBack) {
          this.transitionName = 'slide-left'
        } else {
          this.transitionName = 'slide-right'
        }
       
        this.$router.isBack = false
        }
    }
  }

• 第二种: 通过vue-router的钩子函数进行监听,请不要忽略next

如果觉得我的文章对你有帮助,欢迎关注我的blog

相关知识点

【Javascript】深入理解async/await的实现,Generator+Promise = Async/Await
【Javascript】深入理解this作用域问题以及new运算符对this作用域的影响
【Javascript】手写运算符new创建实例并实现js继承