Je code donc je suis là.

0%

Vue.Js Transitioning Single Elements/Component 過渡與動畫效果

原本在一般頁面要製造一些簡單的動畫效果,只要掌控 class 和 Css 就好了,但是如果要在框架內做這些動態效果,如何做?

在 Vue 裡有它的特殊做法,必須把享有動態效果的元素,以<transition>的標籤包起來,並給予一個name的屬性,然後在 CSS 裡,以這個name來作為 class 的名稱,並加上動畫不同時期的後綴,來達到動態效果。

先來看一下 Codepen VueJs Transitioning Single Elements/Component 過渡與動畫效果

我們先來看一張官方上的示意圖:

要指定進出場的樣式需要搭配 Vue 指定的後綴詞,進、出場個分三個階段
進場:

階段 進場 Enter 出場 Leave
開始 v-enter v-leave
結束 v-enter-to v-leave-to
整個過程 v-enter-active v-leave-active

再依照每個過程,指定不同的效果。而表中的v是在沒有給<transition>名字的時候,如果有給name,則把v用我們給的name替換就好了。

淡入淡出的過度效果 Transition

以淡入淡出的效果來說,在 HTML 需要先將<transition>把我們要做動態效果的元素包住,例如我們希望點一個按鈕,讓文字淡入淡出切換,就可以寫成:

1
2
3
4
5
6
7
8
<div id="app1">
<!-- 將字慢慢消失、透明度0 -->
<button @click="show = !show">Switch1</button>
<transition name="fade">
<!-- <p v-show="show">Hello Paris</p> -->
<p v-if="show">Hello Paris</p>
</transition>
</div>

在文字的<p>標籤內,我們可以給v-ifv-show,這兩個效果是一樣的。

Vue 實例的部分

1
2
3
4
5
6
const vm1 = new Vue({
el: '#app1',
data: {
show: true
}
});

然後在 CSS 裡依上述規則指定,在進場時透明度為 0 漸變為 100,而出場則反之。而按鈕則控制進出場的切換。

1
2
3
4
5
6
7
8
9
10
/*指定進場*/
.fade-enter-active,
.fade-leave-active {
transition: opacity 1s;
}
/*指定出場*/
.fade-enter,
.fade-leave-to {
opacity: 0;
}

動畫效果的放大縮小 Animation

我們也可以以動畫的方式來將組件變大變小與出場,也是一樣使用 Enter 和 Leave 的三個階段,分別設定。
CSS 的部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* 使用Animation 動畫 */
.bounce-enter-active {
animation: bounce-in 1s;
}
.bounce-leave-active {
animation: bounce-in 1s reverse;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}

HTML 部分
因為文字段落<p>標簽是行內元素,所以放大縮小會以整行的大小來算,所以會看不出小果,最好將這段該成display: inline-block就可比較清出的看出變化效果。

1
2
3
4
5
6
7
8
9
<!-- Animation 動畫 -->
<div id="app4">
<button @click="show = !show">Toggle show</button><br />
<transition name="bounce">
<p v-if="show" style="display: inline-block">
Hello Tainan
</p>
</transition>
</div>

Vue 實例的部分

1
2
3
4
5
6
const vm4 = new Vue({
el: '#app4',
data: {
show: true
}
});

發現原本可以簡單在 Css 裡做出的的動畫效果,在框架裡做還是有些綁手綁腳,如果讓這些小果更容易操控,得要先了解
Vue 是怎麼處理這些效果,在官網的解釋算是蠻清楚的,但幫自己要做一些簡單的圖片入場效果,就開始感到有點綁手綁腳,有點可惜。

如果對此部分有興趣的話,除了可以看看官方解釋,也推薦「Summer。桑莫。夏天」的部落格,只少比較親和。

Transitioning Single Elements/Components
官方文件:進入/離開 & 列表過渡 — Vue.js

Vue.js: 樣式與漸變 Transitions | Summer。桑莫。夏天

Vue.js: 進階過渡效果 | Summer。桑莫。夏天