Vue.js: 進階過渡效果
09 Jun 2017
Vue.js 的進階過渡效果，含載入時的漸變效果、過度模式、元件間的過渡、列表過渡、可重複使用的過渡效果。
載入時的漸變效果
在<transition>設定 appear 屬性可增加載入時的漸變效果。
預設樣式類別
預設使用 enter 或 leave 的樣式類別，Prefix 為「v-」。範例如下，使用 enter 的樣式類別v-enter-active。
.v-enter-active {
animation: go 2s;
}
客製化樣式類別
在<transition>加入以下屬性，用來設定客製化樣式類別。
appear-class：載入開始時的樣式類別。appear-to-class：整個載入過程的樣式類別，Vue.js 的版本必須是 2.1.8 以上。appear-active-class：載入結束時的樣式類別。
鉤子
在<transition>中綁定鉤子（JavaScript Hooks），可和 CSS 漸變和動畫效果一起使用。
- beforeAppear：載入前。
- appear：載入時。
- afterAppear：載入後。
- appearCancelled：載入開始後，執行取消載入。
範例
- 載入時方塊會由白轉灰。
- 設定客製化的樣式類別「fade-enter-active」，以用於整個載入過程。
- 綁定鉤子，在每個階段使用
console.log提示目前的狀態。
Demo。
程式碼。
<div id="app">
<transition
appear
appear-active-class="fade-enter-active"
@before-appear="beforeAppear"
@appear="appear"
@after-appear="afterAppear"
>
<div class="block"></div>
</transition>
</div>
.fade-enter-active {
animation: go 2s;
}
@keyframes go {
from {
background: #fff;
}
to {
background: #999;
}
}
var vm = new Vue({
el: '#app',
methods: {
beforeAppear: function(el) {
console.log('beforeAppear');
},
appear: function(el) {
console.log('appear!');
},
afterAppear: function(el) {
console.log('afterAppear!');
},
},
});
過渡模式（Transition Modes）
過渡模式有兩種：「in-out」和「out-in」。
in-out
- Step 1：新加入的元件先做漸變進入
- Step 2：漸變進入結束後，現有的元件再漸變離開
如下範例，點擊按鈕「Click Me!」後，Box 2 先淡入，然後 Box 1 再淡出。
<button @click="show = !show">Click Me!</button>
<transition mode="in-out">
<div class="block" v-if="show">Block 1</div>
<p class="block" v-else>Block 2</p>
</transition>
out-in
- Step 1：現有的元件先漸變離開
- Step 2：漸變離開結束後，新加入的元件再漸變進入
如下範例，點擊按鈕「Click Me!」後，Box 1 先淡出，然後 Box 2 再淡入。
<button @click="show = !show">Click Me!</button>
<transition mode="out-in">
<div class="block" v-if="show">Block 1</div>
<p class="block" v-else>Block 2</p>
</transition>
無過渡模式
如果沒有特別指定元素漸變的順序，則預設是同步的。意即，Block 1 與 Block 2 同時發生漸變，一個淡入，另一個淡出。
元件間的過渡
使用動態組件實現元件間的過渡。
如下所示，點擊按鈕「Click Me!」後，藉由切換 template，Box 1 先淡出，然後 Box 2 再淡入。
Demo。
程式碼。
<button @click="changeView()">Click Me!</button>
<transition mode="out-in">
<component :is="view"></component>
</transition>
...
components: {
'v-a': {
template: '<div class="block">Block 1</div>'
},
'v-b': {
template: '<p class="block">Block 2</p>'
}
}
列表過渡
以上都是處理單一元素或一次顯示一個元素的狀況，如果是對一群元素做漸變或動畫該怎麼處理呢？例如，當我們使用v-for迭代出一連串的元素 / 資料的時候－使用<transition-group>來處理吧，而<transition-group>有以下特色。
- 與
<transition>不同，<transition-group>是會渲染真實的元素的，預設是<span>，但可自行設定要渲染的元素。 - 每個元素必須設定唯一 key 值。
進入與離開
如下所示，點擊按鈕「Click Me!」後，新加入「Zoe」到尾端。
Demo。
程式碼。
備註：由於部落格會把花括號吃掉，因此在左右加一個點，例如「.{.{ }.}.」。
<button @click="add()">Click Me!</button>
<transition-group name="list" tag="div">
<span v-for="item in items" class="list-item" :key="item.id">
.{.{ item.name }.}.
</span>
</transition-group>
var vm = new Vue({
el: '#app',
data: {
show: false,
items: [
{ id: 1, name: 'Apple' },
{ id: 2, name: 'Bill' },
{ id: 3, name: 'Cathy' },
{ id: 4, name: 'Faith' },
{ id: 5, name: 'Gary' },
],
},
methods: {
add: function() {
this.items.push({ id: 6, name: 'Zoe' });
},
},
});
可重複使用的過渡效果
將過渡或動畫效果撰寫成元件，意即，將<transition>或<transition-group>包在 template 裡面。
例如，將「載入時的漸變效果」寫成元件。
Vue.component('fade-enter-transition', {
template: '<transition appear\
appear-active-class="fade-enter-active">\
<div class="block"></div>\
</transition>',
});
