Vue過渡的應用及技巧

Vue中提供了<transition>和<transition-group>來為元素增加過渡動畫。文件寫的很清楚，但是實際使用起來還是費了一番功夫。這裡做一個簡單的記錄:
單個過渡使用<transition>元素把要過渡的部分包裹起來，<transition>不會在DOM中渲染出來，只是做一個標記。其中常用的屬性主要是：
- name : 匹配相應的過渡類名，當沒有name的時候預設為v-enter,v-leave-active等
- mode:控制離開/進入的先後順序，out-in或者in-out

多個元素過渡的時候使用<transition-group>元素把要過渡的部分包裹起來，<transition-group>會在DOM中渲染一個新的元素，把要過渡的這多個部分包裹起來，渲染的元素預設是span，可以使用tag屬性來設定。常用的屬性是：
- tag: 預設為span，實際使用的時候，可以設定為要過渡的部分的父元素的型別。
- name：過渡類名，同上
注意，<transition-group>的每個子節點必須有獨立的key，動畫才能正常工作。並且這裡的key需要是item的一部分才可以，如item.id。我偷懶想用迴圈的index，會bug。該bug具體表現為：當你刪除多個節點中的任意一個時，動畫永遠發生在最後一個節點身上。

例如：

//html
<transition-group tag="ul" name="slide">
  <li v-for="item in items" :key="item.id">
    {{ item.text }}
  </li>
</transition-group>
//css
.slide-enter{opacity:0;transform: translate(-50px,0px);}
.slide-leave-active {opacity:0;transform:translate(0px,-50px);}

關於過渡動畫的除錯技巧

這裡是很重要的一個地方，動畫的除錯不像js除錯，能夠設定斷點，逐步跟蹤，動畫不執行時，經常並不會報錯，我在實際使用的過程中，一開始也花了大量的時間在除錯上，後來找到了技巧，就簡單多了。
動畫除錯步驟;
1.首先確認是否有給要過渡的DOM元素加上transition: all .2s ease;屬性，在不使用animation時，必須有這個過渡屬性，才能平滑改變DOM的css屬性，如果忘記加了，也不會報錯，但就是一直沒效果。
2.然後在瀏覽器F12中，選擇要執行動畫的DOM元素，然後在F12中新增動畫結束狀態時該DOM的css屬性。這一步的原因在於，很多時候我們以為動畫沒有執行，其實是執行了，只是看不出來而已。比如子div撐大了父div的高度，此時動畫改變父div的高度，也並沒有用。所以我們一開始先確認一下，保證動畫結束時的狀態準確無誤。如果無誤，這時候在控制檯改變屬性，就已經能看到動畫正確執行時，應該有的漸變效果了。
3.最後，如果動畫還沒有正確執行，就要檢查相應的name，tag,key等屬性是否有正確新增，過渡類名的選擇是否有誤。在插入元素時，是先插入，再動畫的，所以使用v-enter;而在刪除元素時，是先動畫，再刪除的，所以使用v-leave-active。具體使用什麼根據需求來定。

動畫的小技巧

在刪除DOM節點的時候，我遇到了這樣一個問題，動畫結束之後，刪除之前，這個DOM元素依然在父元素中，父元素的高度依然被他撐大。刪除之後的一瞬間，父元素的高度不被他撐大了，所以立即改變，在這裡就產生了一些不平滑的動作，看起來很突兀。想了很久最後用一個感覺不那麼優雅的辦法解決了，如果有人看到這裡，有更好的方法，請務必留言告訴我，謝謝。
我的方法是，在動畫結束的時候，將該子元素設定為position:absolute，這樣他就不會撐大父元素的高度了，但是這又產生了一個新的問題：刪除時該元素會在絕對定位之後的地方閃爍一下才消失，為了避免閃爍，在絕對定位之後，再給他一個top:-99999px;把絕對定位的元素移動到螢幕外，避免使用者看到閃爍。雖然這個方法總覺得不太合適，但是能解決問題，在有更好的方式之前，也只能先這樣了。