Vue.js 系列教程 5：动画

Posted 2020-09-01 放荡不羁爱自由

原文：intro-to-vue-5-animations

译者：nzbin

译者的话：经过两周的努力，终于完成了这个系列的翻译，由于时间因素及个人水平有限，并没有详细的校对，其中仍然有很多不易理解的地方。我和原作者的初衷一样，希望大家能够通过这个系列文章有所收获，至少可以增加学习的乐趣，我也在学习的路上，所学心得必将与大家共勉。

这是 javascript 框架 Vue.js 五篇教程的第五部分。在这个系列的最后一部分，我们将学习动画（如果你了解我，你知道这一章迟早会来）。这个系列教程并不是一个完整的用户手册，而是通过基础知识让你快速了解 Vuejs 以及它的用途。

系列文章:

1. 渲染, 指令, 事件
2. 组件, Props, Slots
3. Vue-cli
4. Vuex
5. 动画 (你在这!)

背景知识

内置的 <transition> 和 <transition-group> 组件同时支持 CSS 和 JS 钩子。如果你熟悉 React ， transition 组件的概念对你并不陌生，因为在生命周期钩子中，它与 ReactCSSTransitionGroup 类似，但也有显著的差异 ，这让书呆子的我很兴奋。

我们先讨论 CSS 过渡，然后再讨论 CSS 动画，之后介绍 JS 动画钩子以及动画的生命周期方法。过渡状态超出了本文的范围，但这是可能的。这是我为此做的一个评价不错的例子 。只要能得到充足的休息，我确信会写那篇文章。

过渡 vs. 动画

你可能不明白为什么过渡和动画在这篇文章中分成了不同的部分，让我解释一下，虽然它们很相似，但也有不同的地方。过渡就是从一个状态向另一个状态插入值。我们可以做很多复杂的事情，但是很简单。从起始状态，到结束状态，再回来。

动画有点不同，你可以在一个声明中设置多个状态。比如，你可以在动画 50% 的位置设置一个关键帧，然后在 70% 的位置设置一个完全不同的状态，等等。你可以通过设置延迟属性实现很复杂的运动。动画也可以实现过渡的功能，只需要从头到尾插入状态，但是过渡无法像动画一样插入多个值。

在工具方面，两者都是有用的。过渡如同一把“锯”而动画如同“电锯”。有时你需要明白一件事，购买昂贵的设备可能是愚蠢的。对于大型项目，投资“电锯”更有意义。

了解了这些知识之后，再来讨论 Vue！

CSS 过渡

假设有一个简单的模态窗。通过点击按钮显示或隐藏模态窗。根据前面的部分， 我们可以这样做：创建一个按钮的 Vue 实例，在实例中创建一个子组件，设置数据的状态，这样可以通过切换布尔值并添加事件处理实现子组件的显示及隐藏。我们可以使用 v-if 或者 v-show 来切换组件可见性。也可以使用 slot 放置模态窗的切换按钮。

<div id="app">
  <h3>Let\'s trigger this here modal!</h3>
  <button @click="toggleShow">
    <span v-if="isShowing">Hide child</span>
    <span v-else>Show child</span>
  </button>
  <app-child v-if="isShowing" class="modal">
    <button @click="toggleShow">
      Close
    </button>
  </app-child>
</div>

<script type="text/x-template" id="childarea">
  <div>
    <h2>Here I am!</h2>
    <slot></slot>
  </div>
</script>

const Child = {
  template: \'#childarea\'
};

new Vue({
  el: \'#app\',
  data() {
    return {
      isShowing: false
    }
  },
  methods: {
    toggleShow() {
      this.isShowing = !this.isShowing;
    }
  },
  components: {
    appChild: Child
  }
});

See the Pen Transition Demo- base without transition by Sarah Drasner (@sdras) on CodePen.

可以正常工作，但是这样的模态窗有点不和谐。

以上是关于Vue.js 系列教程 5：动画的主要内容，如果未能解决你的问题，请参考以下文章

Vue.js 教程 : 过渡动画

Vue.js 系列教程 3：Vue

Vue.js 系列教程 4：Vuex

09《Vue 入门教程》Vue 过渡 & 动画

Vue.js 系列教程 2：组件，Props，Slots

Vue.js 系列教程 1：渲染，指令，事件