一、動畫過渡
關於動畫部分，一般是css3的transtion、transform和animation，這部分可以參考w3school上的內容。
二、vue的內置組件
vue的內置組件一共有五個（截至到目前vue2.x），這里主要介紹的是過渡組件<transition>和<transition-group>（官方文檔）。
1、常用情形
- 條件渲染 v-if
- 條件顯示 v-show
- 動態組件 <component :is="xxx">
- 組件根節點
2、<transition>的渲染
<transition name="fade"> <p v-if="show">test</p> </transtion>
new Vue({ el:"#demo", data(){ return{ show: true; } } })
.fade-enter-active, .fade-leave-active{ transition: all 1s ease-in-out; } .fade-enter, .fade-leave-to{ opacity: 0; }
3、<transition>的標簽屬性、事件
4、<transition-group>
<transition>可用於渲染v-if，v-show，v-if/v-else的元素，但是渲染v-if/v-else時如果是同名標簽（如都是<div>）也需要指明key值
<transition-group>用於渲染v-for的元素，如整個列表的渲染，但是渲染時每個子節點都應該有自己的key值
三、鈎子函數
<transition>和<transition-group>都有自己的事件屬性，可以使用v-on指令指定對應的js函數
<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) { // ... }, // 當與 CSS 結合使用時 // 回調函數 done 是可選的 enter: function (el, done) { // ... done() }, afterEnter: function (el) { // ... }, enterCancelled: function (el) { // ... }, // -------- // 離開時 // -------- beforeLeave: function (el) { // ... }, // 當與 CSS 結合使用時 // 回調函數 done 是可選的 leave: function (el, done) { // ... done() }, afterLeave: function (el) { // ... }, // leaveCancelled 只用於 v-show 中 leaveCancelled: function (el) { // ... } }
當只用 JavaScript 過渡的時候，在 enter 和 leave 中必須使用 done 進行回調。否則，它們將被同步調用，過渡會立即完成。
對於僅使用 JavaScript 過渡的元素添加 v-bind:css="false"，Vue 會跳過 CSS 的檢測。這也可以避免過渡過程中 CSS 的影響。
四、過渡模式
在vue的transition組件中，離開和進入是同時發生的，這意味着兩個元素會同時存在一段時間，如果想避免這種情況，可以使用過渡模式<transition mode='in-out'>來渲染，過渡模式有以下兩種：
-
in-out：新元素先進行過渡，完成之后當前元素過渡離開。 -
out-in：當前元素先進行過渡，完成之后新元素過渡進入。