如何实现四个Veu路由过渡动效

这篇文章主要讲解了“如何实现四个Veu路由过渡动效”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“如何实现四个Veu路由过渡动效”吧！

Vue Router 过渡是向Vue应用程序添加个性的一种快速简便的方法。它让我们可以在应用程序的不同页面之间添加平滑的动画/过渡效果。

如果使用得当，它可以让我们的应用程序更加现代和专业，从而增强用户体验。

在今天的文章中，我们介绍使用Vue Router过渡的基础知识，然后再介绍一些基本示例，希望能给大家一些启发和灵感。

下面我们要创建的四个过渡页面。

将 Vue 路由过渡添加到项目中

通常，Vue路由器设置如下所示

// default template <template>   <router-view /> </template>

在旧版本的Vue Router中，我们可以简单地用<transition>组件包装<router-view>。

然而，在Vue Router的新版本中，我们必须使用v-slot来解构我们的 props  ，并将它们传递到我们的内部插槽。这个slow包含一个被transition包围的动态组件。

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

每个 Route 都有不同的过渡

默认情况下，用 <transition>包装<component>将在我们使用的每条路由上添加相同的过渡。

有两种不同的方法可以为每个路由定制转场。

将过 transition 移到各个组件部分

首先，我们可以将 <transition>移到每个单独的组件中，而不是用 <transition>组件来包装我们的动态组件。如下：

// app.vue <template>   <transition>     <div class="wrapper">       <!-- -->     </div>   </transition> </template>

对于我们想要每个路由都有一个过渡效果，通过这种方式，我们可以通过过渡的名称来定制每个路由。

使用 v-bind 的动态过渡

另一种方法是将过渡的名称绑定到一个变量。然后，我们可以根据监听路由动态地改变这个变量。

<transition :name="transitionName">   <component :is="Component" /> </transition>

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

现在，我们了解了Vue Router Transition 的基础知识，下面我们来看一些 Nice 的示例。

1 &ndash; Fade Vue Router Transitions

添渐隐页面过渡可能是我们可以添加到Vue应用程序中最常用的动效之一。

我们可以通过更改元素的opacity 来实现此效果。

首先，我们创建一个带有fade名称的 Vue Router transition。还要注意的另一件事是，我们将过渡模式设置为 out-in。

有三种不同的过渡模式:

• default &ndash; 进入和离开过渡同时发生

• in-out &ndash; 新元素的过渡先进入。然后，当前元素过渡出去。

• out-in - 当前元素先过渡出去。然后，新元素过渡进来。

为了让新元素平滑地淡入，我们需要在开始新的过渡之前删除当前元素。所以我们使用 mode="out-in"。

<transition>为我们提供了几个CSS类，它们在动画周期中被动态添加/删除。

有6个不同的过渡类(3个用于进入，3个用于离开)。

1. 鸿蒙官方战略合作共建——HarmonyOS技术社区

2. v-enter-from：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。

3. v-leave-from：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。

4. v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。

5. v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。

6. v-enter-to：定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter-from  被移除)，在过渡/动画完成之后移除。

7. v-leave-to：离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave-from  被删除)，在过渡/动画完成之后移除。

注意:当我们为过渡提供一个name属性时，这是默认名称。类的格式是name-enter-from、name-enter-active，等等。

我们希望进入和离开状态的opacity 为0。然后，当我们的过渡处生效状态时，对 opacity 进行动画的处理。

// fade styles! .fade-enter-active, .fade-leave-active {   transition: opacity 0.5s ease; }   .fade-enter-from, .fade-leave-to {   opacity: 0; }

最后的效果 ：

2 &ndash; Slide Vue Router Transitions

我们要构建的下一个过渡是幻灯片过渡。

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

// 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 &ndash; 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 &ndash; 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); }

感谢各位的阅读，以上就是“如何实现四个Veu路由过渡动效”的内容了，经过本文的学习后，相信大家对如何实现四个Veu路由过渡动效这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！