1. 程式人生 > >Vue.js學習記錄-7-Vue進階:動畫特效

Vue.js學習記錄-7-Vue進階:動畫特效

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>