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を使用します.

export default {
  name: 'app',
  data () {
    return {
      msg: ''
    }
  },
}

しかし、多くの場合、移行効果を動的に変更する必要があります.ここでは、2つの実装方法を紹介します.テストで使用できます.

第1種: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
        }
    }
  }

第2種:vue-routerのフック関数で傍受し、next

を無視しないでください.

  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()
    }
  }

もし私の文章があなたに役に立つと思ったら、私のblogに注目してください.
関連知識点
【Javascript】async/awaitの実装を深く理解し、Generator+Promise=Async/Await【Javascript】this役割ドメインの問題とnew演算子がthis役割ドメインに及ぼす影響を深く理解する【Javascript】手書き演算子newインスタンスを作成し、js継承を実現する