4个很 Nice 的Vue Router过渡动效，快来收藏！(2)-木庄网络博客

模板如下所示。由于我们希望进入和离开过渡同时发生，因此使用默认模式即可。

// slide transition
<router-view v-slot="{ Component }">
  <transition name="slide">
    <component :is="Component" />
  </transition>
</router-view>

为了让例子更好看，我们给每个页面加上下面的样式：

// component wrapper
.wrapper {
  width: 100%;
  min-height: 100vh;
}

最后，在过渡样式里为要滑动的组件设置相关的属性。如果需要不同的滑动方向，只需更改CSS属性（top, bottom, left, right）。

// slide styles!
.slide-enter-active,
.slide-leave-active {
  transition: all 0.75s ease-out;
}
 
 
.slide-enter-to {
  position: absolute;
  right: 0;
}
 
 
.slide-enter-from {
  position: absolute;
  right: -100%;
}
 
 
.slide-leave-to {
  position: absolute;
  left: -100%;
}
 
 
.slide-leave-from {
  position: absolute;
  left: 0;
}

最终的效果:

3 ?C Scale Vue Router Transitions

创建缩放过渡与我们的淡入过渡非常相似。我们再次将模式设置为 out-in，以便我们可以确保动画的正确顺序。

// scale transition!
 
<router-view v-slot="{ Component }">
  <transition name="scale" mode="out-in">
    <component :is="Component" />
  </transition>
</router-view>

.scale-enter-active,
.scale-leave-active {
  transition: all 0.5s ease;
}
 
 
.scale-enter-from,
.scale-leave-to {
  opacity: 0;
  transform: scale(0.9);
}

这里给整个网页提供黑色的背景色会让过渡看上去更干净。

4 ?C Combining Vue Router Transitions

创建过渡的方式有很多很多但是，我认为不要过度过的，刻意的去做过渡。过渡动效应该是很小的，微妙的增强功能，而不是会让应用产生干扰因素。

我认为实现较好过渡是将一些更基础的过渡结合在一起。

例如，让我们将幻灯片放大和缩小合并为一个过渡。

<router-view v-slot="{ Component }">
  <transition name="scale-slide">
    <component :is="Component" />
  </transition>
</router-view>

.scale-slide-enter-active,
.scale-slide-leave-active {
  position: absolute;
  transition: all 0.85s ease;
}
 
 
.scale-slide-enter-from {
  left: -100%;
}
 
 
.scale-slide-enter-to {
  left: 0%;
}
 
 
.scale-slide-leave-from {
  transform: scale(1);
}
 
 
.scale-slide-leave-to {
  transform: scale(0.8);
}