关于css:用了很多动效介绍-4个很-Nice-的-Veu-路由过渡动效

1次阅读

共计 4144 个字符，预计需要花费 11 分钟才能阅读完成。

作者：Ahmad shaded
译者：前端小智
起源：sitepoint

点赞再看，养成习惯

本文 GitHub https://github.com/qq44924588… 上曾经收录，更多往期高赞文章的分类，也整顿了很多我的文档，和教程材料。欢送 Star 和欠缺，大家面试能够参照考点温习，心愿咱们一起有点货色。

Vue Router 过渡是向 Vue 应用程序增加共性的一种疾速简便的办法。它让咱们能够在应用程序的不同页面之间增加平滑的动画 / 过渡成果。

如果应用切当，它能够让咱们的应用程序更加古代和业余，从而加强用户体验。

在明天的文章中，咱们介绍应用 Vue Router 过渡的基础知识，而后再介绍一些根本示例，心愿能给大家一些启发和灵感。

上面咱们要创立的四个过渡页面。

通常，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>

默认状况下，用 <transition> 包装 <component> 将在咱们应用的每条路由上增加雷同的过渡。

有两种不同的办法能够为每个路由定制转场。

首先，咱们能够将 <transition> 移到每个独自的组件中，而不是用 <transition> 组件来包装咱们的动静组件。如下：

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

对于咱们想要每个路由都有一个过渡成果，通过这种形式，咱们能够通过过渡的名称来定制每个路由。

另一种办法是将过渡的名称绑定到一个变量。而后，咱们能够依据监听路由动静地扭转这个变量。

<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 的示例。

添渐隐页面过渡可能是咱们能够增加到 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-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;}

最初的成果：

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

模板如下所示。因为咱们心愿进入和来到过渡同时产生，因而应用默认模式即可。

// 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;
}

最终的成果:

创立缩放过渡与咱们的淡入过渡十分类似。咱们再次将模式设置为 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);
}

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

创立过渡的形式有很多很多然而，我认为不要适度过的，刻意的去做过渡。过渡动效应该是很小的，奥妙的加强性能，而不是会让利用产生烦扰因素。

我认为实现较好过渡是将一些更根底的过渡联合在一起。

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

<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);
}

~ 完，我是刷碗智，我要去刷碗了，咱们下期见！

代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。

原文：https://learnue.co/2021/01/4-…

文章每周继续更新，能够微信搜寻「大迁世界」第一工夫浏览和催更（比博客早一到两篇哟），本文 GitHub https://github.com/qq449245884/xiaozhi 曾经收录，整顿了很多我的文档，欢送 Star 和欠缺，大家面试能够参照考点温习，另外关注公众号，后盾回复福利，即可看到福利，你懂的。

正文完