Enter/Leave & List Transitions

Transition

在 Vue 中，提供了 transition 這個 tag ，它可以實現夾在它標籤內的 DOM 的進退場動畫效果。
通常我們可以搭配，
v-if 有條件的重新渲染 DOM 或找 v-show 有條件的重新顯示 DOM 。
ex:

---HTML---
<div id="app">
  <transition name='fade'>
    <p v-if="show">Hello world</p>
  </transition>
</div>

---CSS---
.fade-enter {
  opacity: 0;
}
.fade-enter-active {
  transition: opacity 1s;
}
.fade-enter-to {
  opacity: 1;
}
.fade-leave {
  opacity: 1;
}
.fade-leave-active {
  transition: opacity 1s;
}
.fade-leave-to {
  opacity: 0;
}

---JavaScript---
new Vue({
  el: '#app',
  data: {
    show: true
  }
})

以上這個範例，展示讓一個 p 段落產生淡入淡出的動畫效果。那在 transition 這個標籤上要綁定一個 name 屬性，裡面放的就是該動畫效果的 css 名稱，但要記得，不要連 enter 或 leave 的那些內容也寫進去囉，
因為，在這些 css class 的撰寫格式上，Vue 是有規定要怎麼寫的喔。
v-enter, v-enter-active, v-enter-leave 這邊分別代表動畫進入、動畫過場和動畫結束的 css class 名稱的撰寫格式。
v-leave, v-leave-active, v-leave-leave 這邊分別代表動畫離開、動畫離開過場和動畫離開結束的 css class 名稱的撰寫格式。

animation

在 transition 部分，它也可以直接綁定 Animation 的 CSS 效果，方法跟 Transition 方式差不多，只是 CSS 寫法有一點不一樣。

以上這個範例，你就可以看到是引入了 bounce 的效果，但是，它的 css 的動畫效果看起來怪怪的是因為，它的 transform 的原點的緣故，所以，你在用 animation 的動畫效果時，
要特別注意 transform 原點的設定。

Custom Transition Classes

在 Vue 有提供我們可以自己指定在 DOM 進退場過程中，要執行哪一種動畫效果。

以上的範例，可以看到我們直接指定了 enter-active 和 leave-active 要分別吃到哪一種動畫效果，那這些動畫效果是由 Animation 所提供的。
這邊要特別注意一下，Animation 的 class 名稱跟 Vue官方文件中的內容不太一樣，這是因為這邊是用第四版本的 animation ，所以，當你在用其他 library 的時候，要特別注意它的內容有沒有更動喔。

Transitioning Between Elements

在 transition 標籤中，要加入兩個以上的 tag 的時候，可以用 v-if 和 v-else 來切換元素執行你加入的動畫效果。
ex:

---HTML---
<transition name='fade'>
  <p v-if="show">Hello world</p>
  <div v-else>Hello Landy!!!</div>
</transition>

可以看到以上範例在 transition 標籤中，有兩個 DOM 元素，他們之間就是用 v-if 和 v-else 來切換元素執行我所加入的 fade 動畫效果

相同標籤要加入key達成切換不同DOM

注意~~~~~~~~~~
當 transition 中，有相同 tag 名稱的 DOM 元素的時候，記得為他們分別加上專屬的 key 屬性，不然， Vue 編譯器，不會去執行你加入的動畫效果喔。
ex:

---HTML---
<transition name='fade'>
  <p v-if="show" key="a">Hello world</p>
  <p v-else key="b">Hello world</p>
</transition>

Transition Modes

在 transition 中還有提供一個 mode 屬性，它的值有兩種選擇一個是 in-out 另一個是 out-in 。
in-out: 此效果會讓新元素先進場，等它的效果完全結束之後，才讓舊有元素退場。
out-in: 此效果會讓舊元素先退場，等它的效果完全退場之後，才讓新元素進場。

那這個屬性是用來解決，當你的 transition 裡面有兩個要切換顯示的元素，當你要從 a 元素切換到 b 元素的中間，這兩個元素都會同時被選染到頁面上，但這部是我們要的效果，而且這樣的效果也有可能
會導致破版的問題，所以，我們可以加入 mode 屬性並將其設為 out-in，來讓解決以上問題。

Transition between Components

這個部分就是在講要怎麼在 transition 裡面切換不同 Vue 元件的動畫，其實方法都差不多，只不過我們會利用 is 來動態綁定不一樣的元件，來達到進退場的效果。

以上這個範例，就可以看到我們利用 is 來綁定不一樣的元件，並用 transition 實現不同元件之間的進退場動畫。

List Transitions

這個部分是在講，當我們要讓某一個陣列裡面的元素都有進退場動畫時，就會利用 transition-group 這個 tag 來實現這種效果。
那 transition-group 跟原本的 transition 不一樣的地方是，transition-group 需要設定它是什麼 HTML 標籤，那它是靠一個 tag 屬性來達成，其預設值為 span。
另外，在遍歷該陣列中的元素時，記得一定要為他們綁定各自的 key 屬性，才能讓 Vue 分辨得出來他們是不一樣的。
其餘綁定相對應進退場動畫的方式，就跟 transition 一樣，就是用 name 去做綁定。

Dynamic Transitions

在 Vue 中也有提到，我們也是可以透過 v-bind 綁定 transition 的 name 屬性，來動態的切換它的動畫效果的喔。

Alex 宅幹嘛-眉眉角角

Alex 推薦函式庫

loadash
underscore
以上個兩個 library 它是套件，提供很多方法來處理 js 裡面的內容，有空看一下。
不需要在自己重複造輪子了，直接用別人的會比較方便。

在 transition 中的 display 屬性

在 Vue 的官方文件中有特別提到，在文件中的 flip 效果的範例中的元素其 display 不要設為 inline 這樣會導致 flip 的動畫失效，
取而代之的是你將這些原本 display 是 inline 的元素改為 inline-block ，或者將它們統一放到一個具有 flex 屬性的父層中。

Landy Blog

Alex宅幹嘛ReVue-Day13_Transition