當我們在使用Vue-Router時，為了使用者有更好的視覺效果及體驗，我們通常需要實現基於路由的動態過渡效果

在Vue中,<router-view> 是基本的動態元件，所以我們可以用 <transition> 元件給它新增一些過渡效果：

<transition>
  <router-view></router-view>
</transition>

如果我們只需要單純的給定一個過渡效果時，只需要給name屬性賦一個固定的值即可 或 利用enter-active-class、leave-active-class

<template>
  <div id="app">
    <transition  name="custom-classes-transition"  enter-active-class="animated slideInRight" leave-active-class="animated slideOutLeft" >
        <router-view></router-view> 
    </transition>
  </div>
</template>

<script
 
>
export default {
  name: 'app',
  data () {
    return {
      msg: ''
    }
  },
}
</script>

<style scoped>
    #app{
    height: 100%;
    width:100%;
  }
  .animated{
    animation-duration: 0.4s;
  }
  #app div{
      position:absolute;
  }
</style>

但大多數時候我們都是需要動態改變過渡效果,這裡我介紹兩種實現方式，經測試都是可用的。

• 第一種: watch $route 決定使用哪種過渡

<template>
  <div>
  <transition :name="transitionName">
    <router-view class="child-view"></router-view>
  </transition>
  </div>
</template>

  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
        }
    }
  }
</script>
<style>
.slide-left-enter-active {
  transition: all .3s ease;
}
.slide-left-leave-active {
  transition: all .8s ease  ;
}
.slide-left-enter, 
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(100%);
  opacity: 0;
}
.slide-left-leave-to{
 transform: translateX(-100%);
  opacity: 0;
}

.slide-right-enter-active {
  transition: all .3s ease;
}
.slide-right-leave-active {
  transition: all .8s ease  ;
}
.slide-right-enter, 
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(-100%);
  opacity: 0;
}
.slide-right-leave-to{
    transform: translateX(100%);
    opacity: 0;
}</style>

• 第二種: 通過vue-router的鉤子函式進行監聽,請不要忽略next

<template>
  <div>
  <transition :name="transitionName">
    <router-view class="child-view"></router-view>
  </transition>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        transitionName: 'slide-left'
      }
    },
    beforeRouteUpdate (to, from, next) {
      console.log(to,from)
        if(this.$route.path!='/home') //假設name為home的路由都使用`slide-left`,其它的路由都為`slider-right`
        {
            this.$router.isBack=true;
        }
      let isBack = this.$router.isBack
      if (isBack) {
        this.transitionName = 'slide-right'
      } else {
        this.transitionName = 'slide-left'
      }
      this.$router.isBack = false
      next()
    }
  }
</script>
<style>
.slide-left-enter-active {
  transition: all .3s ease;
}
.slide-left-leave-active {
  transition: all .8s ease  ;
}
.slide-left-enter, 
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(100%);
  opacity: 0;
}
.slide-left-leave-to{
 transform: translateX(-100%);
  opacity: 0;
}

.slide-right-enter-active {
  transition: all .3s ease;
}
.slide-right-leave-active {
  transition: all .8s ease  ;
}
.slide-right-enter, 
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(-100%);
  opacity: 0;
}
.slide-right-leave-to{
    transform: translateX(100%);
    opacity: 0;
}</style>

本篇文章如對您有用請點選關注哦~，謝謝!