Je code donc je suis là.

0%

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

Posted on Edited on In

原本在一般頁面要製造一些簡單的動畫效果，只要掌控 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-if或v-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
<!-- 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。桑莫。夏天