通过示例了解视图转换和动画

作者：马特·马里博约克
译者：小智在前端
来源：stackabuse

如果你有梦想、有实用信息，就微信搜索【向世界大运动】遵循这条清晨还在洗的洗碗智慧。

文章收录在GitHub github.com/qq449245884…。里面有完整的面试考点、资料以及我针对一线厂商的系列文章。

视图过渡和动画是给我们的网站带来更现代感觉并为网站访问者提供更好用户体验的好方法。对于开发人员来说幸运的是，Vue 动画只需几分钟即可设置。

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

首先，我们来看看 Vue Transitiont 如何处理条件渲染内容。

然后，创建您自己的CSS动画样式。

最后，我们将了解如何在 Vue 动画中使用第三方 CSS 库。

了解视图转换

虽然大多数人认为过渡仅仅是装饰，但精心设计的过渡可以：

捕捉并引导用户的注意力
在重要信息下划线
引导用户浏览页面
帮助塑造更专业的品牌形象

所有这些都将有助于改善我们网站的用户体验，提高转化率和用户保留率，这是一个双赢的局面。

将视图过渡添加到我们的项目中

为了适合大多数开发者，VueJS 提供了几种实现过渡的方法：

css 或动画过渡样式
JS 钩子修改 DOM
集成第三方CSS

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

元素是什么？

transition 元素是一个包装器，可以帮助我们向元素添加转换功能。它提供了不同的钩子并添加了修改元素的类，以便我们可以在过渡的不同阶段对它们进行样式设置。

入学
进入活跃班级
上课
来自
离开活跃班级
下课

在将自定义库添加到代码中时，这特别有用，我们将在稍后解释。

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

另外，transition元素还发出JS钩子函数，因此我们可以捕获它们并用JS执行动画。可用的挂钩有：

进出前
进入/离开
进入后/离开后
进入取消/离开取消

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

然后我们就可以在JS中处理它们了。

beforeEnter(el, done) {
   done()
}

Vue 过渡高级用法

以上只是一些基础知识。在项目中你会遇到更复杂的场景。这个怎么做？

让组件过渡处于负载状态

这很容易实现。只需将 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内，以便过渡样式适用于两者。

为了使代码按照我们希望的方式工作，需要注意以下几点：

绝对定位的元素

当视图在两个元素之间转换时，有时会同时显示两个元素并进行输入/输出转换。如果你想要平滑的效果，你绝对可以将它们放置在彼此之上。

否则，元素在添加或删除到 DOM 时可能会跳转。

2。如果元素相同，则必须向组件添加 key 属性

如果元素相同，Vue 会尝试优化内容，仅替换元素的内容。根据文档，当您想要在不同元素之间切换时，最好始终添加 key。

更改过渡时间

View 可以检测过渡/动画何时结束，但如果我们想设置确切的持续时间，我们可以通过 duration 属性进行设置。

我们可以为 enter 和 leave 转换传递一个值，或者我们可以传递一个具有两个值的对象。

<transition :duration="500">...</transition> 
...
<transition :duration="{ enter: 1000, leave: 200 }">...</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>元素中，我们可以将过渡与Animate.js连接到enter-active-class和leave-active-class属性。

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

超简单，操作效果如下：

~终于我是前端小智了，咱们上板吧，下次见！

代码部署后存在的Bug无法实时披露。事后为了解决这些BUG，花费了大量的时间在日志调试上。顺便推荐一下Fundebug，一款好用的BUG监控工具。

原文：learne.co/2020/02/vue…

通讯