Vue2.0 Transition常見用法全解惑

Vue2.0的過渡系統（transition）有了很大的改變，想把1.0的項目遷移到2.0，着實須要費一些功夫，今天我就要把vue2.0的過渡系統的用法搞清楚，由於以前確實踩了很多坑。這裏只涉及單元素/組件的過渡實現，vue2.0的文檔中還講到了初始渲染的過渡、多個元素的過渡、多個組件的過渡和列表過渡，他們的過渡效果實現方式和單元素/組件的相似，我感受實際項目中用的不太多吧，有興趣的同窗能夠去了解一下，文檔這裏說的多個元素和多個組件和咱們的理解可能不太同樣，必定要仔細閱讀文檔，搞清楚到底說的是什麼樣的狀況。

什麼是過渡

Vue只有在插入，更新或者移除DOM元素時纔會應用過渡效果，過渡效果的應用能夠經過不一樣方式實現，官方文檔中提到了以下幾種：

1. 在CSS過渡和動畫中自動應用class；

2. 配合使用第三方的CSS動畫庫，如Animate.css；

3. 在過渡鉤子函數中使用JavaScript直接操做DOM；

4. 配合使用第三方JavaScript動畫庫，如Velocity；

上面四種方式其實主要就是兩種，一個是利用CSS過渡或者動畫，另外一個是利用JavaScript鉤子函數。

怎麼應用過渡到元素/組件上

要想使元素或者組件應用到咱們所寫的過渡動畫，須要使用vue提供的transition來封裝組件成爲過渡組件，transition須要與以下情景中的任一種一塊兒使用：

• v-if（條件渲染）

• v-show（條件展現）

• 動態組件

• 在組建的根節點上，而且被vue實例DOM方法觸發，如appendTo方法把組件添加到某個根節點上

當須要插入或者刪除封裝成過渡元素的元素時，vue將作以下事情：

1. 查找目標元素是否有CSS過渡或者動畫，若是有就在適當的時候進行處理；

2. 若是過渡組件設置了JavaScript鉤子函數，vue會在相應階段調用鉤子函數；

3. 若是以上二者都沒有，DOM操做（插入或者刪除）就在下一幀當即執行。

CSS過渡

先舉一個典型的CSS過渡的例子：

<!-- 首先將要過渡的元素用transition包裹，並設置過渡的name，而後添加觸發這個元素過渡的按鈕（實際項目中不必定是按鈕，任何能觸發過渡組件的DOM操做的操做均可以） -->
<div>
  <button @click="show=!show">show</button>
  <transition name="fade">
    <p v-show="show">hello</p>
  </transition>
</div>

// 接着爲過渡類名添加規則
&.fade-enter-active, &.fade-leave-active
  transition: all 0.5s ease     
&.fade-enter, &.fade-leave-active
  opacity: 0

封裝上面的代碼，就能夠實現一個簡單的動畫了，CSS的transition屬性是用來設置過渡整體效果的，具體可參考：http://www.w3cplus.com/content/css3-transition。

CSS過渡類名

組件過渡過程當中，會有四個CSS類名進行切換，這四個類名與上面transition的name屬性有關，好比name="fade"，會有以下四個CSS類名：

1. fade-enter：進入過渡的開始狀態，元素被插入時生效，只應用一幀後當即刪除；

2. fade-enter-active：進入過渡的結束狀態，元素被插入時就生效，在過渡過程完成以後移除；

3. fade-leave：離開過渡的開始狀態，元素被刪除時觸發，只應用一幀後當即刪除；

4. fade-leave-active：離開過渡的結束狀態，元素被刪除時生效，離開過渡完成以後被刪除；

從上面四個類名能夠看出，fade-enter-active和fade-leave-active在整個進入或離開過程當中都有效，因此CSS的transition屬性在這兩個類下進行設置。
上面示例中，fade-enter和fade-leave-active類設置CSS爲opacity:0，說明過渡剛進入和離開的時候透明度爲0，即不顯示。固然還能夠設置其餘的CSS屬性，transform屬性是除了opacity以外常常在這裏被用到的，transform用法可參考http://www.w3cplus.com/content/css3-transition

CSS動畫

組件過渡的實現不只能夠經過CSS過渡還能夠經過CSS動畫(animation)實現，建議先了解一下CSS3 Animation，這裏仍是給個例子：

<div>
  <button @click="show=!show">show</button>
  <transition name="fold">
    <p v-show="show">hello</p>
  </transition>
</div>

.fold-enter-active {
  animation-name: fold-in;
  animation-duration: .5s;
}
.fold-leave-active {
  animation-name: fold-out;
  animation-duration: .5s;
}
@keyframes fold-in {
  0% {
    transform: translate3d(0, 100%, 0);
  }
  50% {
    transform: translate3d(0, 50%, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fold-out {
  0% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, 50%, 0);
  }
  100% {
    transform: translate3d(0, 100%, 0);
  }
}

若是預先了解了CSS動畫（上面給了連接），上面代碼仍是很好理解的，要注意的是CSS動畫中，fold-enter類名在節點插入DOM後不會當即刪除，而是在animationed事件觸發時刪除。

自定義過渡類名

上面的四個過渡類名都是根據transition的name屬性自動生成的，那麼可否本身定義這四個類名呢？答案是能夠的，經過enter-class、enter-active-class、leave-class、leave-active-class這四個特性來定義。

<div>
  <button @click="show=!show">show</button>
  <transition 
    name="fade"
    enter-class="fade-in-enter"
    enter-active-class="fade-in-active"
    leave-class="fade-out-enter"
    leave-active-class="fade-out-active"
  >
    <p v-show="show">hello</p>
  </transition>
</div>

&.fade-in-active, &.fade-out-active
  transition: all 0.5s ease     
&.fade-in-enter, &.fade-out-active
  opacity: 0

上面代碼中，原來默認的fade-enter類對應fade-in-enter，fade-enter-active類對應fade-in-active，依次類推。

JavaScript鉤子函數

除了用CSS過渡的動畫來實現vue的組件過渡，還能夠用JavaScript的鉤子函數來實現，在鉤子函數中直接操做DOM。咱們能夠在屬性中聲明如下鉤子：

<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"
  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
>
</transition>

methods: {
  // 過渡進入
  // 設置過渡進入以前的組件狀態
  beforeEnter: function (el) {
    // ...
  },
  // 設置過渡進入完成時的組件狀態
  enter: function (el, done) {
    // ...
    done()
  },
  // 設置過渡進入完成以後的組件狀態
  afterEnter: function (el) {
    // ...
  },
  enterCancelled: function (el) {
    // ...
  },
  // 過渡離開
  // 設置過渡離開以前的組件狀態
  beforeLeave: function (el) {
    // ...
  },
  // 設置過渡離開完成時地組件狀態
  leave: function (el, done) {
    // ...
    done()
  },
  // 設置過渡離開完成以後的組件狀態
  afterLeave: function (el) {
    // ...
  },
  // leaveCancelled 只用於 v-show 中
  leaveCancelled: function (el) {
    // ...
  }
}

上面的鉤子函數中能夠進行任何你想作的DOM操做。
小技巧：若是你只想設置組件過渡進入的效果而不想有組件過渡離開的效果，這時你就能夠用鉤子函數，只設置beforeEnter、enter、afterEnter這幾個鉤子函數就能夠了。

目前接觸到的關於vue transition相關的就這麼多了，固然vue transition的用法可不止這麼點，這須要我之後的慢慢積累。