第8節：路由的過渡動畫
阿新 • • 發佈：2018-01-15
oid cti san 設置 out show -m 當前 過渡
<transition>標簽
想讓路由有過渡動畫，需要在<router-view>標簽的外部添加<transition>標簽，標簽還需要一個name屬性。
| 1 2 3 | <transition name="fade"> <router-view ></router-view> </transition> |
我們在/src/App.vue文件裏添加了<transition>標簽，並給標簽起了一個名字叫fade。
css過渡類名：
組件過渡過程中，會有四個CSS類名進行切換，這四個類名與transition的name屬性有關，比如name=”fade”,會有如下四個CSS類名：
- fade-enter:進入過渡的開始狀態，元素被插入時生效，只應用一幀後立刻刪除。
- fade-enter-active:進入過渡的結束狀態，元素被插入時就生效，在過渡過程完成後移除。
- fade-leave:離開過渡的開始狀態，元素被刪除時觸發，只應用一幀後立刻刪除。
- fade-leave-active:離開過渡的結束狀態，元素被刪除時生效，離開過渡完成後被刪除。
從上面四個類名可以看出，fade-enter-active和fade-leave-active在整個進入或離開過程中都有效，所以CSS的transition屬性在這兩個類下進行設置。
那我們就在App.vue頁面裏加入四種CSS樣式效果，並利用CSS3的transition屬性控制動畫的具體效果。代碼如下：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | .fade-enter { opacity:0; } .fade-leave{ opacity:1; } .fade-enter-active{ transition:opacity .5s; } .fade-leave-active{ opacity:0; transition:opacity .5s; } |
上邊的代碼設置了改變透明度的動畫過渡效果，但是默認的mode模式in-out模式，這並不是我們想要的。下面我們學一下mode模式。
過渡模式mode：
- in-out:新元素先進入過渡，完成之後當前元素過渡離開。
- out-in:當前元素先進行過渡離開，離開完成後新元素過渡進入。
這節課只能算是一個簡單的過渡入門，教會大家原理，如果想做出實用酷炫的過渡效果，你需要有較強的動畫制作能力，我們下節課繼續學習動畫的知識。
第8節：路由的過渡動畫