VueJS - Chuyển tiếp và Hoạt hình

Trong chương này, chúng ta sẽ thảo luận về các tính năng chuyển đổi và hoạt ảnh có sẵn trong VueJS.

Chuyển tiếp

VueJS cung cấp nhiều cách khác nhau để áp dụng chuyển tiếp cho các phần tử HTML khi chúng được thêm / cập nhật trong DOM. VueJS tích hợp sẵn thành phần chuyển tiếp cần được bao bọc xung quanh thành phần cần chuyển tiếp.

Cú pháp

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

Chúng ta hãy xem xét một ví dụ để hiểu hoạt động của quá trình chuyển đổi.

Thí dụ

<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>

Có một nút gọi là clickme được tạo bằng cách sử dụng mà chúng ta có thể thay đổi giá trị của biến hiển thị thành true thành false và ngược lại. Đây là mộtp tagchỉ hiển thị phần tử văn bản nếu biến là true. Chúng tôi đã bọc thẻ p với phần tử chuyển tiếp như được hiển thị trong đoạn mã sau.

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

Tên của quá trình chuyển đổi là fade. VueJS cung cấp một số lớp tiêu chuẩn cho quá trình chuyển đổi và các lớp được đặt trước tên của quá trình chuyển đổi.

Sau đây là một số lớp tiêu chuẩn để chuyển tiếp -

  • v-enter- Lớp này được gọi ban đầu trước khi phần tử được cập nhật / thêm vào. Đó là trạng thái bắt đầu.

  • v-enter-active- Lớp này được sử dụng để xác định độ trễ, thời lượng và đường cong nới lỏng để vào trong giai đoạn chuyển tiếp. Đây là trạng thái hoạt động cho toàn bộ và lớp có sẵn trong toàn bộ giai đoạn nhập.

  • v-leave - Được thêm vào khi quá trình chuyển đổi rời khỏi được kích hoạt, bị xóa.

  • v-leave-active- Áp dụng trong giai đoạn rời đi. Nó bị xóa khi quá trình chuyển đổi được thực hiện. Lớp này được sử dụng để áp dụng độ trễ, thời lượng và đường cong nới lỏng trong giai đoạn rời khỏi.

Mỗi lớp trên sẽ được bắt đầu bằng tên của quá trình chuyển đổi. Chúng tôi đã đặt tên của quá trình chuyển đổi là fade, do đó tên của các lớp trở thành.fade_enter, .fade_enter_active, .fade_leave, .fade_leave_active.

Chúng được định nghĩa trong đoạn mã sau.

<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 và .fade_leave_active được định nghĩa cùng nhau và nó áp dụng một quá trình chuyển đổi khi bắt đầu và ở giai đoạn rời khỏi. Thuộc tính opacity được thay đổi thành 0 trong 2 giây.

Thời lượng được xác định trong .fade_enter_active và .fade_leave_active. Giai đoạn cuối cùng được xác định trong .fade_enter, .fade_leave_to.

Màn hình hiển thị trong trình duyệt như sau.

Khi nhấp vào nút, văn bản sẽ biến mất sau hai giây.

Sau hai giây, văn bản sẽ biến mất hoàn toàn.

Chúng ta hãy xem xét một ví dụ khác, nơi có một hình ảnh và nó được dịch chuyển trên trục x khi nút được nhấp.

Thí dụ

<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>

Tên của quá trình chuyển đổi là shiftx. Thuộc tính biến đổi được sử dụng để dịch chuyển hình ảnh trên trục x đi 100px bằng cách sử dụng đoạn mã sau.

<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>

Sau đây là đầu ra.

Khi nhấp vào nút, hình ảnh sẽ dịch chuyển 100px về phía bên phải như thể hiện trong ảnh chụp màn hình sau.

Hoạt hình

Hoạt ảnh được áp dụng giống như cách thực hiện chuyển tiếp. Animation cũng có các lớp cần được khai báo để hiệu ứng diễn ra.

Chúng ta hãy xem xét một ví dụ để xem hoạt ảnh hoạt động như thế nào.

Thí dụ

<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 dụng hoạt ảnh, có các lớp giống như chuyển tiếp. Trong đoạn mã trên, chúng ta có một hình ảnh nằm trong thẻ p như được hiển thị trong đoạn mã sau.

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

Tên của quá trình chuyển đổi là shiftx. Lớp áp dụng như sau:

<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>

Lớp có tiền tố là tên chuyển đổi, tức là shiftx-enter-active và .shiftx-left-active. Hoạt ảnh được xác định với khung hình chính từ 0% đến 100%. Có một biến đổi được xác định tại mỗi khung hình chính như được hiển thị trong đoạn mã sau.

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

Sau đây là đầu ra.

Khi nhấp vào nút, nó sẽ xoay từ 0 đến 360 độ và biến mất.

Các lớp chuyển đổi tùy chỉnh

VueJS cung cấp một danh sách các lớp tùy chỉnh, có thể được thêm vào làm thuộc tính cho phần tử chuyển tiếp.

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

Các lớp tùy chỉnh về cơ bản phát huy tác dụng khi chúng ta muốn sử dụng thư viện CSS bên ngoài như animate.css.

Thí dụ

<html>
   <head>
      <link href = "https://cdn.jsdelivr.net/npm/[email protected]" 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>

Đầu ra

Đầu ra

Đầu ra

Có hai hoạt ảnh được áp dụng trong đoạn mã trên. Một enter-active-class = “animation swing” và một left-active-class = ”animation bounceIn”. Chúng tôi đang sử dụng các lớp hoạt ảnh tùy chỉnh để hoạt ảnh được áp dụng từ thư viện của bên thứ ba.

Thời lượng chuyển đổi rõ ràng

Chúng ta có thể áp dụng chuyển tiếp và hoạt ảnh trên phần tử bằng VueJS. Vue đợi sự kiện transionend và animationend để phát hiện xem hoạt ảnh hoặc chuyển đổi đã được thực hiện xong chưa.

Đôi khi quá trình chuyển đổi có thể gây ra sự chậm trễ. Trong những trường hợp như vậy, chúng ta có thể áp dụng thời hạn một cách rõ ràng như sau.

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

Chúng ta có thể sử dụng thuộc tính thời lượng với một: trên phần tử chuyển tiếp như hình trên. Trong trường hợp cần xác định thời lượng riêng biệt cho việc ra vào, có thể thực hiện như trong đoạn mã trên.

JavaScript Hooks

Các lớp chuyển tiếp có thể được gọi là các phương thức sử dụng các sự kiện JavaScript. Chúng ta hãy xem xét một ví dụ để hiểu rõ hơn.

Thí dụ

<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>

Đầu ra

Trong ví dụ trên, chúng ta đang thực hiện hoạt ảnh bằng phương thức js trên phần tử chuyển tiếp.

Các phương pháp chuyển đổi được áp dụng như sau:

<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>

Có một tiền tố được thêm vào v-onvà tên của sự kiện mà phương thức được gọi. Các phương thức được định nghĩa trong thể hiện Vue như sau:

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 })
   }
}

Quá trình chuyển đổi bắt buộc được áp dụng trong mỗi phương pháp này. Có một hoạt ảnh độ mờ được áp dụng khi nhấp vào nút và cả khi hoạt ảnh được hoàn thành. Thư viện của bên thứ ba được sử dụng cho hoạt ảnh.

Có một thuộc tính được thêm vào quá trình chuyển đổi v-bind: css = "false", được thực hiện để Vue hiểu đó là một quá trình chuyển đổi JavaScript.

Chuyển đổi tại Kết xuất ban đầu

Để thêm hoạt ảnh khi bắt đầu, chúng ta cần thêm thuộc tính 'xuất hiện' vào phần tử chuyển tiếp.

Hãy xem một ví dụ để hiểu rõ hơn.

Thí dụ

<html>
   <head>
      <link href = "https://cdn.jsdelivr.net/npm/[email protected]" 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>

Trong ví dụ trên, chúng tôi đã sử dụng ba hoạt ảnh khác nhau từ thư viện animate.css. Chúng tôi đã thêm xuất hiện vào phần tử chuyển tiếp.

Khi thực thi đoạn mã trên, sau đây sẽ là đầu ra trong trình duyệt.

Hoạt ảnh trên các thành phần

Chúng ta có thể kết thúc quá trình chuyển đổi cho các thành phần bằng đoạn mã sau. Chúng tôi đã sử dụng thành phần động ở đây.

Thí dụ

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
      <link href = "https://cdn.jsdelivr.net/npm/[email protected]" 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>

Đầu ra

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved