Vue路由器过渡动效的示例分析

　　介绍

这篇文章给大家分享的是有关Vue路由器过渡动效的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

Vue的优点

Vue具体轻量级框架,简单易学,双向数据绑定,组件化,数据和结构的分离,虚拟DOM,运行速度快等优势,Vue中页面使用的是局部刷新,不用每次跳转页面都要请求所有数据和DOM,可以大大提升访问速度和用户体验。

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

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

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

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

Vue路由器过渡动效的示例分析

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

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

//,default 模板 　　& lt; template> 　　& lt;才能router-view /比; 　　& lt;/template>

在旧版本的Vue路由器<强> 中,我们可以简单地用<代码> & lt; transition> & lt; router-view> 。

然而,在Vue路由器的新版本中,我们必须使用<代码> v-slot> 道具> 缓慢包含一个被<代码> 过渡包围的动态组件。

& lt; router-view  v-slot=皗}, Component “比; 　　& lt;才能transition> 　　,,,& lt; component :是=癈omponent",/比; 　　& lt;才能/transition> 　　& lt;/router-view>

每个路线都有不同的过渡

默认情况下,用<代码> & lt; transition> & lt; component>

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

<强>将过过渡移到各个组件部分

首先,我们可以将<代码> & lt; transition> & lt; transition> //,app.vue 　　& lt; template> 　　& lt;才能transition> 　　,,,& lt; div 类=皐rapper"比; 　　,,,,,& lt; !——,——比; 　　,,,& lt;/div> 　　& lt;才能/transition> 　　& lt;/template>

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

<强>使用v-bind的动态过渡

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

& lt; transition : name=皌ransitionName"比; 　　& lt;才能component :=癈omponent",/比; 　　& lt;/transition> 看:,{ 　　& # 39;才能路线# 39;美元,(,,),{ 　　,,,const  toDepth =, to.path.split (& # 39;/& # 39;) . length 　　,,,const  fromDepth =, from.path.split (& # 39;/& # 39;) . length 　　,,,this.transitionName =, toDepth  & lt;, fromDepth  ?, & # 39; slide-right& # 39;,:, & # 39; slide-left& # 39; 　　,,} 　　}

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

1 – Fade Vue Router Transitions

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

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

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

有三种不同的过渡模式:

  • default – 进入和离开过渡同时发生

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

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

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

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

Vue路由器过渡动效的示例分析