关于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;
}

你可能感兴趣的:(关于Vue Router的过渡效果)