【译】如何使用Vue过渡效果来提高用户体验

在Vue应用中添加过渡效果是一个可使你的项目感受更专业的简单方法。经过提高用户体验，可使你的网站留住更多的用户以及提升转化率。 只须要简单的处理就能够得到巨大的回报，何乐而不为？ 在这个指南中，咱们将带你了解关于Vue过渡效果的相关知识，从最基本的开箱即用的方法到建立自定义过渡效果。 准备好开始学习关于Vue的过渡了吗？让咱们开始吧。

为何还要使用过渡效果

大部分人会以为过渡效果只是一种装饰，可是一个具备好的设计的过渡效果能够达到如下一些做用：

• 吸引用户的注意力
• 强调重要的信息
• 网站更加天然流畅
• 引导用户浏览你的网页
• 有助于创造更专业的品牌形象

以上全部的点能够很好地提高网站的用户体验以及提升转化率。共赢。

OK，如今咱们知道了过渡效果对你的网站是极其的有帮助，让咱们学习若是用Vue来实现这种效果吧。

建立一个Vue过渡效果

为了容纳普遍不一样技术栈的开发者，VueJS提供了几种方法来实现过渡：

• 在CSS过渡和动画应用class
• 在过渡钩子函数使用JS实现操做DOM
• 使用第三方CSS/JS库

要使用以上哪种方式取决于你现有的技术知识。若是是有更好的HTML/CSS经验，那你可使用第一种。若是你是从React转过来的或者只有更多的JS经验，手动地操做DOM也是一个好的方式。

如今咱们重点介绍使用CSS编写单个元素的动画效果。不过请放心，咱们后续将介绍更高级的内容（多个元素，动态组建、例子）。

了解过渡组件

transition元素是一个容器，能够帮助你在元素上添加过渡功能。本质上，它设置了不一样的函数钩子以及在变化的元素中添加calss，所以咱们能够在不一样的过渡阶段设置样式。

有6种不一样的过渡class（3个进入的，3个离开的类），分别是： 一、v-enter/v-leave：过渡的开始状态；过渡离开开始状态。 二、v-enter-active/v-leave-active:过渡激活状态。 三、v-enter-to/v-leave-to:过渡结束状态。 详细可参考官方文档

提示：当你对过渡定义一个名称，这就是默认的名称。类名的格式为name-enter，name-enter-active等等。

下面咱们看下添加过渡的简单方式。 格式化模版的代码很是简单。只须要将须要过渡效果的元素用组件包裹起来便可。就像这样：

<template>
  <div>
    <button @click='visible = !visible'>Toggle Div</button>
    <transition name="fade">
      <div v-if="visible">
        Hello World
      </div>
    </transition>
  </div>
</template>
<script>
export default {
  data () {
    return {
      visible: true
    }
  }
}
</script>
复制代码

很简单，对吧？ 如今，咱们须要添加一些样式来实现真正的过渡效果了。 咱们使用官方文档例子的一些样式：

<style lang="scss">
.fade-enter-active, .fade-leave-active {
 transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
 opacity: 0;
}
</style>
复制代码

以上代码是作了什么？其实这个很直观，由于加了一些相似状态的类名。 这些样式说明当过渡激活的时候，对opacity属性添加过渡，使其平滑地变化。 而后，设置过渡进入开始状态和过渡离开的结束状态为零（不可见）。同时，要记住当元素没有设置fade-enter或者fade-leave-to类名，opacity将会设置回默认值。

好了。 能够在你的Vue应用里添加过渡效果了。如今，咱们来继续深刻，了解更多细节。 另外，你也可使用CSS动画来实现过渡效果。 只有你可以使用合适的类名，就能够根据本身的喜爱对这些组件进行样式设置。 下面来看看过渡效果的更高级用法。

在组件加载后使用过渡效果

超级简单，只须要在过渡元素添加一个appear属性便可，像这样：

<transition name="fade" appear>
      <div v-if="visible">
        Hello World
      </div>
</transition>
复制代码

多个元素使用过渡效果

一样地，这个也是超级简单。像下面那样两个div之间切换。

<transition name="fade" appear>
      <div v-if="visible">
        Option A
      </div>
      <div v-else>
        Option B
      </div>
</transition>
复制代码

你所须要作的就是用transition元素将这些元素包裹起来，过渡效果就能够生效。 但须要注意如下几点： 当在两个元素之间应用Vue过渡效果时，有时两个元素都是可见的而且正在移入/移出。若是要达到一个平滑的效果，你可能须要将它们绝对定位在彼此的顶部。 若是元素具备相同的标签，Vue会进行优化并且只替换元素的内容，而不是从新销毁建立。根据官方文档，若是须要在多个元素之间进行转换，最佳实践就是在元素上添加一个key。

动态组件使用过渡效果

这个相对于上面的例子更加简单了。只须要把动态组件放在transition元素里面就能够了。例如：

<transition name="fade" appear>
      <component :is='componentType' />
</transition>
复制代码

建立一个可重用的过渡组件

使用slot建立一个可替换内容的组件，例如：

<template>
  <transition name="fade" appear>
    <slot></slot>
  </transition>
</template>
复制代码

最后

没什么好说的。Happpy Coding。

后记

文章写的实在太啰嗦，写不下去了。还不如看官方文档。水文一篇。以上译文仅用于学习交流，水平有限，不免有错误之处，敬请指正。

参考

原文 一个学习Vue的网站:learnVue