8.動畫特效

• CSS過渡動畫原理

  在Vue底層中，通過**<transaction>標籤包裹的內部元素會進行自動構建動畫流程。即：Vue是通過更換元素上的class**來進行過渡動畫效果的呈現的。

  下圖是CSS過渡動畫(入場動畫)的執行流程，離場動畫同理。
  

  在過渡動畫流程中可以看出：被<transaction>包裹的內部元素會在該流程中進行class的新增和去除。

  • 初始狀態：內部元素新增fade-enter、fade-enter-active
  • 中間狀態：內部元素去除fade-enter，新增fade-enter-to
  • 最終狀態：內部元素去除fade-enter-active、fade-enter-to

  下面例子中，通過按鈕點選事件對show的值進行該**<div>元素的顯示與否**，method以及data就不做展示了。

    <transition>
        <div v-if="show">
                Hello World
        </div>
    </transition>	
  

  新增嵌入式的CSS樣式

    <style type="text/css">
        .v-enter, .v-leave-to {
            opacity: 0; 
        }
        /* 當被transition包裹的元素在顯示的過程中，enter-active是一直存在。而當被包裹元素消失的過程中，leave-active是一直存在的*/
        .v-enter-active, .v-leave-active {
            transition: opacity 3s;
        }
    </style>
   
  

  設定opacity變數值，通過transition進行監控opacity的值變化，變化後便進行3s的動畫過渡效果。

  動畫演示：注意在<transition>包裹的內部元素的class變化*

  • 入場過渡動畫

  

  • 離場過渡動畫
    
    TIPS：<transition>標籤可以新增name屬性，該屬性決定了過渡動畫所新增的類名。例如：name=“fade”，此時過渡動畫

  所新增的class為：fade-enter等。預設不新增name屬性時，過渡動畫的class預設是：v-enter等，例子中採用的就是預設值。

• Animate.css庫

  Animate.css 一款強大的預設css3動畫庫

  改造上述例子：加入animate.css動畫庫。

  • 引入animate.css動畫庫：

      <link rel="stylesheet" type="text/css" href="./animate.css">
    

  • 改造**<transition>**標籤

      <!-- 採用animation.css庫中的動態CSS樣式 -->
      <!-- 這裡對過渡動畫中的enter-active 和 leave-active所屬的類樣式名稱更改為animated xxx -->
      <transition 
          enter-active-class="animated swing"
          leave-active-class="animated rubberBand"
          >
          <div v-if="show">
                  Hello World
          </div>
      </transition>
    

  • 動畫效果演示：

    • 入場
      

    • 離場
      

    • 執行時長：預設的動畫執行時長是1s，詳情見下圖。
      

  • Animate.css動畫庫實際上是採用了CSS3標準下的keyframe規則，建立動畫的原理是，將一套 CSS 樣式逐漸變化為另一套樣式。

• 過渡和動畫特效結合

  仍然是改造上述例子：將過渡動畫和animate動畫結合使用。

  1. 引入嵌入式CSS樣式：

      <style>
          .fade-enter, .fade-leave-to {
              opacity: 0;
          }
          .fade-enter-active, .fade-leave-active {
              transition: opacity 3s;
          }
      </style>
     

  2. 改造<transition>標籤內容：

      <!-- 採用animation.css庫中的動態CSS樣式 -- C3中keyframe形式的封裝動畫庫-->
      <!-- 這裡對過渡動畫中的enter-active 和 leave-active所屬的類樣式名稱更改為animated xxx -->
      <!-- appear 自定義類名為animation庫中的動畫效果，此時在頁面重新整理時，也會具有相應設定的動畫效果，即入場動畫-->
      <!-- type 屬性控制動畫執行時長的控制，過渡動畫transaction為3s，animate預設為1s,這裡採用了過渡動畫的執行時長 -->
      <!-- 自定義動畫時長 :duration="5000" 或者區分入場和退場動畫：{enter:5000, leave: 10000}-->
      <transition 
          type="transition"
          name="fade"
          appear 
          enter-active-class="animated swing fade-enter-active"
          leave-active-class="animated rubberBand fade-leave-active"
          appear-active-class="animated swing"
          >
          <div v-if="show">
                  Hello World
          </div>
      </transition>
     

  3. 測試效果：

     1. 頁面重新整理動畫
        
     2. 入場動畫
        
     3. 離場動畫
        

• Js動畫和Velocity.js結合

  在開始本小節內容之前，我們先來了解一下網頁的互動動畫。

  網頁互動動畫大概分為：CSS動畫，Js動畫。

  • CSS動畫：

      由於CSS3可以根據CSS屬性自定義動畫，所以這類動畫的優點就是不用進行計算和更改DOM會顯得非常流暢。
      可以通過@keyframes規則建立動畫。 @keyframes規則內部指定一個CSS樣式和動畫將逐步從目前的樣式更改為新的樣式。
    

  • Js動畫：

       Js動畫擁有強大的效能，並且優於css動畫。根據Js來改變屬性值，所以沒有css那樣的侷限性，可以實現更多的功能的動畫。
    

  • Velocity.js：

      Velocity是一個簡單易用、高效能、功能豐富的輕量級JS動畫庫。
      它能和jQuery完美協作，並和$.animate()有相同的 API，但它不依賴jQuery，可單獨使用。 
      Velocity不僅包含了$.animate()的全部功能，還擁有：顏色動畫、轉換動畫(transforms)、迴圈、 緩動、SVG動畫、滾動動畫等特色功能。
      它比$.animate()更快更流暢，效能甚至高於CSS3 animation，是jQuery和CSS3 transition的最佳組合，它支援所有現代瀏覽器。
    

  • 改造例子

    • 引入Velocity.js

        <script src="./velocity.js"></script>
      

    • 改造**<transition>**標籤，例子僅展示出場動畫。

        <!-- 繫結JS動畫鉤子事件 入場動畫before-enter、enter、after-enter -->
        <!-- 出場動畫對應的JS鉤子函式：before-leave、leave、after-leave -->
        <transition name="fade"
            @before-enter="handleBeforeEnter"
            @enter="handleEnter"
            @after-enter="handleAfterEnter"
        >
            <div v-show="show">
                Hello World
            </div>
        </transition>
      

    • methods中新增繫結方法：在handleEnter方法中採用Velocity.js進行了改寫。

       methods: {
           handleClick: function() {
               this.show = !this.show
           },
           handleBeforeEnter: function(el) {
               el.style.color = 'red'
               el.style.opacity = 0;
           },
           handleEnter: function(el, done) {
               // setTimeout(() => {
               //     el.style.color = 'green'
               // }, 2000)
      
               // setTimeout(() => {
               //     done()
               // }, 4000)
               // Js動畫庫 - velocity.js
                   Velocity(el, {
                       opacity: 1
                   }, {
                       duration: 3000,
                       complete: done
                   })
           },
           handleAfterEnter: function(el) {
               el.style.color = 'green'
               console.log("動畫結束")
           }
       }
      

    • Js動畫演示，僅出場動畫(點選按鈕，紅色字樣出現，持續三秒，字樣顏色變綠色，控制檯列印資訊，動畫流程結束)
      

• 多個元素或元件的過渡

  <transition>標籤中通過mode屬性設定元素切換效果：out-in、in-out

  • 多個元素

      <!-- 預設情況下vue會進行DOM元素的複用，使得過渡動畫效果無法得以展示，新增key屬性值可以避免vue的DOM複用 -->
      <!-- mode屬性可以設定元素切換的效果 in-out、out-in-->
      <transition mode="out-in">
          <div v-if="show" key="hello">Hello World</div>
          <div v-else key="bye">Bye World</div>
      </transition>
    

  • 多個元件

      <!-- 通過動態元件的方式，實現元件的切換動畫效果 -->
      <transition mode="out-in">
          <component :is="type"></component>
      </transition>
    

• 列表過渡

  列表過渡通過：<transition-group>標籤實現，以下通過遍歷列表例子說明

  • 使用**<transition-group>標籤做列表過渡**

      <!-- 列表過渡採用transaction-group標籤 -->
      <transition-group>
          <div v-for="item of list" :key="item.id">
              {{item.title}}
          </div>
      </transition-group>
    

  • 演示列表過渡

    

• 動畫封裝：採用元件的形式將常用的動畫效果進行封裝

  例如：將採用Js動畫鉤子的上述案例進行元件整合如下：

  • 宣告全域性元件

      Vue.component('fade', {
          props: ['show'],
          template: `
              <transition mode="out-in" @before-enter="handleBeforeEnter"
              @enter="handleEnter"
              @after-enter="handleAfterEnter">
                  <slot v-if="show"></slot>
              </transition>
          `,
          methods: {
              handleBeforeEnter: function(el) {
                  el.style.color = 'red';
              },
              handleEnter: function(el, done) {
                  setTimeout(() => {
                      el.style.color = 'green';
                  }, 2000)
    
                  setTimeout(() => {
                      done();
                  }, 4000)
              },
              handleAfterEnter: function(el) {
                  el.style.color='black';
                  console.log("動畫結束");
              }
          }
      })
    

  • DOM中使用該動畫元件

      <fade :show="show">
      	<h2>Tom and Jerry</h2>
      </fade>