vue路由动画问题

Question

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

const routes = [
  { path: '/home', component: home },
  { path: '/detail', component: detail },
  { path: '/order', component: order },
  { path: '/', component: home }
]

    watch: {
        '$route' (to, from) {
            const toDepth = to.path.split('/').length;
            const fromDepth = from.path.split('/').length;
            this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
        }
      }

我整个页面就一个<router-view></router-view>，是不是无法实现路由切换的时候让即将消失路由从左边消失，即将进来的路由从右边进来？

Answer 1

直接在组件中加transition

Answer 2

你是想做模拟APP的路由切换方式么

我最近想做一个小项目,目前还是半成品,但是其中的transition部分已经实现了这个操作,你可以去看看是不是你想要的

https://github.com/tgxpuisb/vue-open-use

Answer 3

再设置mode为out–in

Answer 4

不需要使用mode-in
或者说这个效果反而会导致失效
这个的原因可能出现在你使用的css类上面，因为slide的时候是设置transition:translate的
这个时候就有可能出现走了一段事件，但是因为显示效果的原因当前依旧白屏。
给你一个我写的方案吧
重点在与translate 百分比跟absolute、
一个设置好的滑动效果
一个设置好布局

/*
 * @Author: L
 * @Date: 2018-04-21 15:55:40
 * @Last Modified by: L
 * @Last Modified time: 2018-04-22 17:19:31
 */
<template>
  <div id="app">
    <!-- <transition name="fade"
                mode="out-in"
                leave-active-class="animated bounceOutRight"
                enter-active-class="animated bounceInLeft">
      <router-view/>
    </transition> -->
    <transition name="fade"
               >
      <router-view class="router-view"/>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style scoped lang='scss'>
#app {
  height: 100%;
  width: 100%;
  .router-view{
    position: absolute;
  }
  .fade-enter-active {
    animation: bounce-in .3s;
  }
   .fade-leave-active {
    animation: bounce-out .3s;
  }
  @keyframes bounce-in {
    0% {
      transform: translate3d(-100%, 0, 0);
    }
    25% {
      transform: translate3d(-75%, 0, 0);
    }
    50% {
      transform: translate3d(-50%, 0, 0);
    }
    75% {
      transform: translate3d(-25%, 0, 0);
    }
    100% {
      transform: translate3d(0px, 0, 0);
    }
  }
  @keyframes bounce-out {
    0% {
      transform: translate3d(0, 0, 0);
    }
    25% {
      transform: translate3d(25%, 0, 0);
    }
    50% {
      transform: translate3d(50%, 0, 0);
    }
    75% {
      transform: translate3d(75%, 0, 0);
    }
    100% {
      transform: translate3d(100%, 0, 0);
    }
  }
}
</style>