Vue.js: 進階過渡效果
09 Jun 2017Vue.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>',
});