登录  /  注册
首页 > web前端 > Vue.js > 正文

4个很 Nice 的Vue Router过渡动效,快来收藏!

青灯夜游
发布: 2021-05-06 18:38:40
转载
1989人浏览过

本篇文章给大家介绍4个很 nice 的 veu 路由过渡动效。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

4个很 Nice 的Vue Router过渡动效,快来收藏!

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

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

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

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

1.gif

将 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: {
  &#39;$route&#39; (to, from) {
    const toDepth = to.path.split(&#39;/&#39;).length
    const fromDepth = from.path.split(&#39;/&#39;).length
    this.transitionName = toDepth < 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"

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

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

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

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

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

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

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

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

注意:当我们为过渡提供一个name属性时,这是默认名称。类的格式是name-enter-fromname-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.gif

2 – 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.gif

3 – 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.gif

4 – 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);
}
登录后复制

5.gif

原文地址:https://learnue.co/2021/01/4-awesome-of-vue-router-transitions/

作者:Ahmad shaded

译文地址:https://segmentfault.com/a/1190000039802609

更多编程相关知识,请访问:编程视频!!

以上就是4个很 Nice 的Vue Router过渡动效,快来收藏!的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
相关标签:
来源:segmentfault网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号