Vue.js 系列教程 5：動畫

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

譯者：nzbin

譯者的話：經過兩周的努力，終於完成了這個系列的翻譯，由於時間因素及個人水平有限，並沒有詳細的校對，其中仍然有很多不易理解的地方。我和原作者的初衷一樣，希望大家能夠通過這個系列文章有所收穫，至少可以增加學習的樂趣，我也在學習的路上，所學心得必將與大家共勉。

這是 JavaScript 框架 Vue.js 五篇教程的第五部分。在這個系列的最後一部分，我們將學習動畫（如果你瞭解我，你知道這一章遲早會來）。這不是一個完整的指南，而是基礎知識的概述，所以你可以瞭解 Vue.js 以及它的用途。

系列文章:

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.

可以正常工作，但是這樣的模態窗有點不和諧。