关于Vue Router的过渡效果

今天想要给项目加一下切换组件时的过渡效果，原本想做成进入新页面时，旧页面下沉（旧页面变暗），新页面向左滑入；离开新页面时，新页面向右滑出，旧页面上浮（旧页面变亮），但是，捣鼓了一天，发现就算勉强实现了效果，但是碰到新新页面向左滑入时，新页面会向右滑出，这样就特别奇怪，最后妥协了，使用了旧页面向左滑出，新页面向左滑入的效果。

记录一下所使用的代码好了

html

    <transition name="dye-bottom">
      <keep-alive>
        <router-view name="home"></router-view>
      </keep-alive>
    </transition>
    <transition name="slide-slip">
      <router-view ></router-view>
      <router-view name="notAlive"></router-view>
    </transition>

css

.slide-slip-enter-active,
.slide-slip-leave-active {
  transition: all .3s;
}
.slide-slip-enter {
  transform: translateX(100%);
  /* opacity: 0; */
}
.slide-slip-leave-to {
  transform: translateX(-100%);
}
.dye-bottom-leave-active,
.dye-bottom-enter-active {
  transition: all .3s;
}
.dye-bottom-enter,
.dye-bottom-leave-to {
  opacity: 0.5;
}