VueJS - 過渡和動畫

上一頁
下一頁

在本章中，我們將討論 VueJS 中提供的過渡和動畫功能。

過渡

VueJS 提供了多種方法將過渡應用於 HTML 元素，當它們在 DOM 中新增/更新時。VueJS 有一個內建的過渡元件，需要將其包裹在需要過渡的元素周圍。

語法

<transition name = "nameoftransition">
   <div></div>
</transition>

讓我們考慮一個例子來理解過渡的工作原理。

示例

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <style>
         .fade-enter-active, .fade-leave-active {
            transition: opacity 2s
         }
         .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
            opacity: 0
         }
      </style>
      <div id = "databinding">
         <button v-on:click = "show = !show">Click Me</button>
         <transition name = "fade">
            <p v-show = "show" v-bind:style = "styleobj">Animation Example</p>
         </transition>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               show:true,
               styleobj :{
                  fontSize:'30px',
                  color:'red'
               }
            },
            methods : {
            }
         });
      </script>
   </body>
</html>

有一個名為 clickme 的按鈕，使用它我們可以將變數 show 的值從 true 更改為 false，反之亦然。有一個 p 標籤，只有當變數為 true 時才顯示文字元素。我們已將 p 標籤用過渡元素包裹，如下面的程式碼片段所示。

<transition name = "fade">
   <p v-show = "show" v-bind:style = "styleobj">Animation Example</p>
</transition>

過渡的名稱為 fade。VueJS 為過渡提供了一些標準類，這些類的名稱以過渡的名稱為字首。

以下是過渡的一些標準類：

  • v-enter - 此類最初在元素更新/新增之前呼叫。這是初始狀態。

  • v-enter-active - 此類用於定義進入過渡階段的延遲、持續時間和緩動曲線。這是整個進入階段的活動狀態，並且在整個進入階段都可用。

  • v-leave - 觸發離開過渡時新增，移除。

  • v-leave-active - 在離開階段應用。過渡完成後將其移除。此類用於在離開階段應用延遲、持續時間和緩動曲線。

每個類都將以過渡的名稱為字首。我們已將過渡的名稱指定為 fade，因此類的名稱變為 .fade_enter、.fade_enter_active、.fade_leave、.fade_leave_active。

它們在以下程式碼中定義。

<style>
   .fade-enter-active, .fade-leave-active {
      transition: opacity 2s
   }
   .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
      opacity: 0
   }
</style>

.fade_enter_active 和 .fade_leave_active 是一起定義的，它在開始和離開階段應用過渡。不透明度屬性在 2 秒內更改為 0。

持續時間在 .fade_enter_active 和 .fade_leave_active 中定義。最終階段在 .fade_enter、.fade_leave_to 中定義。

瀏覽器中的顯示如下。

Vue Transition

單擊按鈕後，文字將在兩秒內淡出。

Fade

兩秒後，文字將完全消失。

讓我們考慮另一個示例，其中有一個影像，當單擊按鈕時它會在 x 軸上移動。

示例

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <style>
         .shiftx-enter-active, .shiftx-leave-active {
            transition: all 2s ease-in-out;
         }
         .shiftx-enter, .shiftx-leave-to /* .fade-leave-active below version 2.1.8 */ {
            transform :  translateX(100px);
         }
      </style>
      <div id = "databinding">
         <button v-on:click = "show = !show">Click Me</button>
         <transition name = "shiftx">
            <p v-show = "show">
               <img src = "images/img.jpg" style = "width:100px;height:100px;" />
            </p>
         </transition>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               show:true
            },
            methods : {
            }
         });
      </script>
   </body>
</html>

過渡的名稱為 shiftx。使用以下程式碼片段，transform 屬性用於使用 100px 將影像沿 x 軸移動。

<style>
   .shiftx-enter-active, .shiftx-leave-active {
      transition: all 2s ease-in-out;
   }
   .shiftx-enter, .shiftx-leave-to /* .fade-leave-active below version 2.1.8 */ {
      transform :  translateX(100px);
   }
</style>

以下是輸出。

Shiftx

單擊按鈕後，影像將向右移動 100px，如下面的螢幕截圖所示。

Image Right

動畫

動畫的應用方式與過渡相同。動畫也有一些類需要宣告才能生效。

讓我們考慮一個例子來了解動畫是如何工作的。

示例

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <style>
         .shiftx-enter-active {
            animation: shift-in 2s;
         }
         .shiftx-leave-active {
            animation: shift-in 2s reverse;
         }
         @keyframes shift-in {
            0%   {transform:rotateX(0deg);}
            25%  {transform:rotateX(90deg);}
            50%  {transform:rotateX(120deg);}
            75%  {transform:rotateX(180deg);}
            100% {transform:rotateX(360deg);}
         }
      </style>
      <div id = "databinding">
         <button v-on:click = "show = !show">Click Me</button>
         <transition name = "shiftx">
            <p v-show = "show">
               <img src = "images/img.jpg" style = "width:100px;height:100px;" />
            </p>
         </transition>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               show:true
            },
            methods : {
            }
         });
      </script>
   </body>
</html>

要應用動畫，有一些與過渡相同的類。在上面的程式碼中，我們有一個用 p 標籤包含的影像，如下面的程式碼片段所示。

<transition name = "shiftx">
   <p v-show = "show"><img src = "images/img.jpg" style = "width:100px;height:100px;" /></p>
</transition>

過渡的名稱為 shiftx。應用的類如下：

<style>
   .shiftx-enter-active {
      animation: shift-in 2s;
   }
   .shiftx-leave-active {
      animation: shift-in 2s reverse;
   }
   @keyframes shift-in {
      0%   {transform:rotateX(0deg);}
      25%  {transform:rotateX(90deg);}
      50%  {transform:rotateX(120deg);}
      75%  {transform:rotateX(180deg);}
      100% {transform:rotateX(360deg);}
   }
</style>

該類以過渡名稱為字首，即 shiftx-enter-active 和 .shiftx-leave-active。動畫使用從 0% 到 100% 的關鍵幀定義。在每個關鍵幀中都定義了一個轉換，如下面的程式碼片段所示。

@keyframes shift-in {
   0%   {transform:rotateX(0deg);}
   25%  {transform:rotateX(90deg);}
   50%  {transform:rotateX(120deg);}
   75%  {transform:rotateX(180deg);}
   100% {transform:rotateX(360deg);}
}

以下是輸出。

Animation

單擊按鈕後，它會從 0 旋轉到 360 度並消失。

Change Degree

自定義過渡類

VueJS 提供了一個自定義類的列表，可以將其作為屬性新增到過渡元素。

  • enter-class
  • enter-active-class
  • leave-class
  • leave-active-class

當我們想要使用外部 CSS 庫（如 animate.css）時，自定義類基本上就會發揮作用。

示例

<html>
   <head>
      <link href = "https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel = "stylesheet" type = "text/css">
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "animate" style = "text-align:center">
         <button @click = "show = !show"><span style = "font-size:25px;">Animate</span></button>
         <transition
            name = "custom-classes-transition"
            enter-active-class = "animated swing"
            leave-active-class = "animated bounceIn">
            <p v-if = "show"><span style = "font-size:25px;">Example</span></p>
         </transition>
      </div>
      <script type = "text/javascript">
         var vm =  new Vue({
            el: '#animate',
            data: {
               show: true
            }
         });
      </script>
   </body>
</html>

輸出

輸出

Animated Swing

輸出

Animated BounceIn

上面的程式碼中應用了兩個動畫。一個 enter-active-class = “animated swing”，另一個 leave-active-class = ”animated bounceIn”。我們正在使用自定義動畫類來應用來自第三方庫的動畫。

顯式過渡持續時間

我們可以使用 VueJS 在元素上應用過渡和動畫。Vue 等待 transionend 和 animationend 事件來檢測動畫或過渡是否完成。

有時過渡會導致延遲。在這種情況下，我們可以顯式應用持續時間，如下所示。

<transition :duration = "1000"></transition>
<transition :duration = "{ enter: 500, leave: 800 }">...</transition>

我們可以像上面那樣在過渡元素上使用帶 : 的 duration 屬性。如果需要分別為進入和離開指定持續時間，可以像上面程式碼片段中那樣進行操作。

JavaScript 鉤子

可以使用 JavaScript 事件將過渡類稱為方法。讓我們考慮一個示例以更好地理解。

示例

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
      <div id = "example-4">
         <button @click = "show = !show">
            <span style = "font-size:25px;">Toggle</span>
         </button>
         <transition  v-on:before-enter = "beforeEnter"
            v-on:enter = "enter"
            v-on:leave = "leave"
            v-bind:css = "false">
            <p v-if = "show" style = "font-size:25px;">Animation Example with velocity</p>
         </transition>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#example-4',
            data: {
               show: false
            },
            methods: {
               beforeEnter: function (el) {
                  el.style.opacity = 0
               },
               enter: function (el, done) {
                  Velocity(el, { opacity: 1, fontSize: '25px' }, { duration: 1000 })
                  Velocity(el, { fontSize: '10px' }, { complete: done })
               },
               leave: function (el, done) {
                  Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 1500 })
                  Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
                  Velocity(el, {
                     rotateZ: '45deg',
                     translateY: '30px',
                     translateX: '30px',
                     opacity: 0
                  }, { complete: done })
               }
            }
         });
      </script>
   </body>
</html>

輸出

JavaScript Hooks

JsHooks

在上面的示例中，我們正在使用過渡元素上的 js 方法執行動畫。

過渡上的方法應用如下：

<transition  v-on:before-enter = "beforeEnter"
   v-on:enter = "enter"
   v-on:leave = "leave"
   v-bind:css = "false">
   <p v-if = "show" style = "font-size:25px;">Animation Example with velocity</p>
</transition>

添加了一個字首 v-on 和方法呼叫的事件名稱。方法在 Vue 例項中定義如下：

methods: {
   beforeEnter: function (el) {
      el.style.opacity = 0
   },
   enter: function (el, done) {
      Velocity(el, { opacity: 1, fontSize: '25px' }, { duration: 1000 })
      Velocity(el, { fontSize: '10px' }, { complete: done })
   },
   leave: function (el, done) {
      Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 1500 })
      Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
      Velocity(el, {
         rotateZ: '45deg',
         translateY: '30px',
         translateX: '30px',
         opacity: 0
      }, { complete: done })
   }
}

在每個方法中應用所需的過渡。在單擊按鈕時以及動畫完成後，都會應用一個不透明度動畫。第三方庫用於動畫。

在過渡上添加了一個屬性 v-bind:css = "false"，這樣做是為了讓 Vue 理解這是一個 JavaScript 過渡。

初始渲染時的過渡

為了在開始時新增動畫，我們需要將“appear”屬性新增到過渡元素。

讓我們看一個例子來更好地理解它。

示例

<html>
   <head>
      <link href = "https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel = "stylesheet" type = "text/css">
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "animate" style = "text-align:center">
         <transition
            appear
            appear-class = "custom-appear-class"
            appear-active-class = "animated bounceIn">
            <h1>BounceIn - Animation Example</h1>
         </transition>
         <transition
            appear
            appear-class = "custom-appear-class"
            appear-active-class = "animated swing">
            <h1>Swing - Animation Example</h1>
         </transition>
         <transition
            appear
            appear-class = "custom-appear-class"
            appear-active-class = "animated rubberBand">
            <h1>RubberBand - Animation Example</h1>
         </transition>
      </div>
      <script type = "text/javascript">
         var vm =  new Vue({
            el: '#animate',
            data: {
               show: true
            }
         });
      </script>
   </body>
</html>

在上面的示例中，我們使用了來自 animate.css 庫的三個不同的動畫。我們已將 appear 新增到過渡元素。

執行上述程式碼後，瀏覽器中的輸出如下。

Different Animation

元件上的動畫

我們可以使用以下程式碼包裝元件的過渡。我們在這裡使用了動態元件。

示例

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
      <link href = "https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel = "stylesheet" type = "text/css">
   </head>
   <body>
      <div id = "databinding" style = "text-align:center;">
         <transition  appear
            appear-class = "custom-appear-class"
            appear-active-class = "animated wobble">
            <component v-bind:is = "view"></component>
         </transition>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               view: 'component1'
            },
            components: {
               'component1': {
                  template: '<div><span style = "font-
                  size:25;color:red;">Animation on Components</span></div>'
               }
            }
         });
      </script>
   </body>
</html>

輸出

Animation on Component
列印頁面
上一頁
下一頁
廣告