经过示例了解Vue过渡和动画

做者：Matt Maribojoc
译者：前端小智
来源：stackabuse

有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及个人系列文章。

Vue过渡和动画让咱们网站更具现代感并为网站访问者提供更好的用户体验的好方法。 幸运的是，对于开发人员而言，Vue动画只需几分钟便可完成设置。

文本主要介绍 Vue <transition>元素，使用该元素建立一些Vue动画，并了解将其添加到项目中的基本知识。

首先，咱们来看一下 Vue Transitiont 怎么处理有条件的渲染内容。

而后，建立本身的CSS动画样式。

最后，咱们将了解如何将第三方CSS库与Vue动画一块儿使用。

理解 Vue 过渡

虽然大多数人认为过渡只是装饰，但精心设计的过渡能够：

• 抓住并引导用户的注意力
• 强调重要信息
• 引导用户浏览页面
• 帮助创建更专业的品牌形象

全部这些要点都将有助于改善咱们网站的用户体验，提升转化率和用户留存率，这是共赢呀。

添加Vue过渡到咱们的项目

为了适应多数的开发人员，VueJS 提供了几种实现过渡的方法：

1. css 或 动画 过渡样式
2. JS Hook 对 DOM 进行编辑
3. 集成第三方CSS

这些方法的难度取决于你现有的知识。

<transition> 元素是啥？

transition 元素是帮助咱们向元素添加过渡功能的包装器。它提供了不一样的钩子，并向不断变化的元素添加了类，这样咱们就能够在转换的不一样阶段对它们进行样式化。

1. enter-from-class
2. enter-active-class
3. enter-to-class
4. leave-from-class
5. leave-active-class
6. leave-to-class

将自定义库添加到代码中时，这特别有用，稍后，咱们会作说明。

<transition 
  enter-active-class="animated fadeIn zoomIn" 
  leave-active-class="animated fadeOut zoomOut"
>
...
</transition>

另外，transition元素还会发出JS钩子函数，所以咱们能够捕获它们并使用 JS 来执行动画。 可用的钩子有：

• before-enter / before-leave
• enter / leave
• after-enter / after-leave
• enter-cancelled / leave-cancelled

<transition   @before-enter='beforeEnter'>
    <!-- ... -->
</transition>

而后，咱们能够在 JS 中处理它们。

beforeEnter(el, done) {
   done()
}

Vue Transition 高级用法

上面介绍的只是一些基础，在项目中，会遇到比较复杂的场景，这要怎么作呢？

让组件在加载下过渡

这个很简单就能实现了， 只需将appear 属性添加到transition 元素中，以下所示：

<transition name="fade" appear>
...
</transition>

在多个元素之间过渡

假设有两个这样交替的div。

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

咱们要作的就是将它们包在transition中，这样过渡样式将同时适用于二者。

要使代码按咱们但愿的方式起做用，须要注意如下几点：

1. 绝对定位元素

当Vue在两个元素之间过渡时，有时会同时显示两个元素并进行进去/离开的过渡。 若是要得到平滑的效果，则可能须要将它们绝对定位在彼此的顶部。

不然，将元素添加到DOM中或从DOM中删除时，这些元素可能只是在各处跳跃。

2.若是元素是同样的，则必须向该组件添加一个key属性

若是元素是同样的，Vue 会尝试优化内容，仅替换元素的内容。 根据文档，若是要在多个元素之间进行过渡，最好始终添加 key。

更改过渡时间

Vue 能够检测到过渡/动画什么时候结束，可是若是咱们想设置确切的持续时间，能够经过 duration 属性设置 。

咱们能够为enter和leave过渡都传递一个值，也能够传有两个值的对象。

<transition :duration="500">...</transition> 
...
<transition :duration="{ enter: 1000, leave: 200 }">...</transition>

动态组件之间的转换

咱们要作的就是将动态组件包装在transition 元素中。

<transition name="fade" appear>
     <component :is='componentType' />
 </transition>

建立一个可重用的 transition 组件

在开发过程当中，尝试设计可重用组件是一个很好的习惯。

封装一个可重用的 transition 很简单，在 transition 里放个 slot，以下所示：

<template>
   <transition name="fade" appear>
     <slot></slot>
   </transition>
 </template>

如今，咱们就没必要担忧将过渡样式，名称和全部内容添加到每一个组件中，而只需使用此组件便可。

目前为止，咱们已经了解了<transition>元素，如今就可使用它来制做动画。

创建第一个动画

<template>
  <div class='main-content'>
    <transition name='rotate'>
      <img 
        v-if='show' 
        src='../img/logo.png'
      > 
    </transition>
  </div>
</template>

<script>
export default {
  data () {
    return {
      show: true
    }
  }
}
</script>

接下来，咱们添加一个按钮，经过切换变量的值来切换元素的显示。

<button @click='show = !show'> Toggle </button>

设置了元素的条件渲染后，咱们使用两个类来设置动画的样式：rotate-enter-active和rotate-leave-active，由于咱们将过渡命名为rotate。

一个技巧是让离开和进入使用相同动画，只是它们的方向相反。

@keyframes rotate {
    0% { opacity: 0; transform: scale(0) rotate(-180deg); }
    100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

.rotate-enter-active {
    animation: rotate 0.2s;
}

.rotate-leave-active {
    animation: rotate 0.2s reverse;
}

如今，切换咱们的组件时，咱们应该看到相似这样的内容。

使用第三方库

假设咱们不想本身编写全部的CSS动画。 有不少很棒的CSS动画库，能够很容易地将它们合并到VueJS动画中。

在第一个示例中，咱们只使用了<transition>元素生成的默认类名，可是咱们能够作的就是将这些值覆盖到咱们想要的任何类中，在这种状况下，它将是CSS库中的类名。

对于咱们的示例，咱们使用的[Animate.css](https://daneden.github.io/animate.css/) 这个动画库，咱们只需将CDN连接添加到咱们的index.html文件便可。

// index.html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">

如今，在咱们的<transition>元素中，咱们可使用enter-active-class和leave-active-class属性将过渡链接到Animate.js。

<transition 
  enter-active-class="animated fadeIn zoomIn" 
  leave-active-class="animated fadeOut zoomOut"
>
...
</transition>

超级简单，运行效果以下：

~完，我是前端小智，去板砖咯，咱们下期见！

---

代码部署后可能存在的BUG无法实时知道，过后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给你们推荐一个好用的BUG监控工具 Fundebug。

原文：https://learne.co/2020/02/vue...

交流

有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq44924588... 已收录，有一线大厂面试完整考点、资料以及个人系列文章。