Transition 漸變

Vue 有封裝好的 transition 元件可以使用，可以讓我們在撰寫漸變特效時更方便，而且我們可以自定義漸變的樣式類別，設計出屬於自己的特效，這麼好用的元件該怎麼使用呢？來看看下面的範例：

<div id="app">
  <button @click="isShow = !isShow">Toggle</button>
  <transition name="fade">
    <h2 v-if="!isShow">Hello Vue</h2>
  </transition>
</div>

new Vue({
  el: '#app',
  data: {
      isShow: false
  }
})

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to{
  opacity: 0;
}

此為官方文件中的範例，我來說明一下，我們可以使用封裝好的 transition 的元件來使用漸變的效果，上面的元件我有給定一個 name 的屬性，如果沒有給定的話也是可以使用的，再來先說明一下漸變的特效要如何發生，在下列四種情況下，元件在進入及離開的時候可以添加漸變特效：

• 條件渲染（v-if）
• 條件顯示（v-show）
• 動態元件
• 元件的根節點

而產生特效的方式，是利用不同時間點加入不同的 className 來達到漸變的效果的，下方是各時間點的說明：

• v-enter：元件插入時生效，並在下一幀移除，進入漸變的開始狀態。
• v-enter-active：定義進入漸變時的狀態。在元素被插入之前生效，並在漸變完成後移除。可以在此定義 duration、delay、easing curve 等。
• v-enter-to：定義進入漸變的結束狀態，進入漸變被觸發後下一幀生效並同時移除 v-enter，漸變完成後移除。( 2.1.8版本以上 )
• v-leave：元件離開時生效，並在下一幀移除，離開漸變的開始狀態。
• v-leave-active：定義離開漸變時的狀態。在元素被離開之前生效，並在漸變完成後移除。可以在此定義 duration、delay、easing curve 等。
• v-leave-to：定義離開漸變的結束狀態，離開漸變被觸發後下一幀生效並同時移除 v-leave ，漸變完成後移除。( 2.1.8版本以上 )

自定義前綴詞

如果我們有給 transition 一個 name 的屬性的話，在設定 CSS 時的前綴詞就會是 name 裡的值，以上面的範例來說的話就是「fade」，如果沒有要自定義前綴詞，也就是沒有設定 name 的屬性的話，前綴詞就預設是「v-」。

經過講解後，是不是就看得懂上面的範例了呢？趕快來試試看，設計出自己的漸變特效吧！

那麼，明天再見囉！