VueJS - Transisi dan Animasi

Pada bab ini, kita akan membahas fitur transisi dan animasi yang tersedia di VueJS.

Transisi

VueJS menyediakan berbagai cara untuk menerapkan transisi ke elemen HTML ketika ditambahkan / diperbarui di DOM. VueJS memiliki komponen transisi bawaan yang perlu dibungkus di sekitar elemen, yang membutuhkan transisi.

Sintaksis

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

Mari kita pertimbangkan contoh untuk memahami cara kerja transisi.

Contoh

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

Ada tombol yang disebut clickme dibuat yang dengannya kita dapat mengubah nilai variabel show menjadi true menjadi false dan sebaliknya. Ada sebuahp tagyang menampilkan elemen teks hanya jika variabelnya benar. Kami telah membungkus tag p dengan elemen transisi seperti yang ditunjukkan pada bagian kode berikut.

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

Nama transisinya adalah fade. VueJS menyediakan beberapa kelas standar untuk transisi dan kelas-kelas tersebut diawali dengan nama transisi.

Berikut adalah beberapa kelas standar untuk transisi -

  • v-enter- Kelas ini awalnya dipanggil sebelum elemen diperbarui / ditambahkan. Ini keadaan awal.

  • v-enter-active- Kelas ini digunakan untuk menentukan penundaan, durasi, dan kurva easing untuk memasuki fase transisi. Ini adalah status aktif untuk keseluruhan dan kelas tersedia selama seluruh fase masuk.

  • v-leave - Ditambahkan ketika transisi keluar dipicu, dihapus.

  • v-leave-active- Diterapkan selama fase keluar. Itu dihapus ketika transisi selesai. Kelas ini digunakan untuk menerapkan kurva penundaan, durasi, dan easing selama fase keluar.

Setiap kelas di atas akan diawali dengan nama transisi. Kami telah memberi nama transisi sebagai fade, maka nama kelas menjadi.fade_enter, .fade_enter_active, .fade_leave, .fade_leave_active.

Mereka didefinisikan dalam kode berikut.

<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 dan .fade_leave_active didefinisikan bersama dan menerapkan transisi di awal dan di tahap keluar. Properti opacity diubah menjadi 0 dalam 2 detik.

Durasi ditentukan dalam berkas .fade_enter_active dan .fade_leave_active. Tahap terakhir didefinisikan di .fade_enter, .fade_leave_to.

Tampilan di browser adalah sebagai berikut.

Dengan mengklik tombol, teks akan menghilang dalam dua detik.

Setelah dua detik, teks tersebut akan hilang sama sekali.

Mari kita pertimbangkan contoh lain, di mana ada gambar dan itu bergeser pada sumbu x saat tombol diklik.

Contoh

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

Nama transisinya adalah shiftx. Properti transformasi digunakan untuk menggeser gambar pada sumbu x sebesar 100px menggunakan potongan kode berikut.

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

Berikut adalah keluarannya.

Pada klik tombol, gambar akan bergeser 100px ke kanan seperti yang ditunjukkan pada gambar berikut.

Animasi

Animasi diterapkan dengan cara yang sama seperti transisi dilakukan. Animasi juga memiliki kelas yang perlu dideklarasikan agar efeknya berlangsung.

Mari kita pertimbangkan contoh untuk melihat bagaimana animasi bekerja.

Contoh

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

Untuk menerapkan animasi, ada kelas yang sama dengan transisi. Dalam kode di atas, kami memiliki gambar yang diapit tag p seperti yang ditunjukkan pada kode berikut.

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

Nama transisinya adalah shiftx. Kelas yang diterapkan adalah sebagai berikut -

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

Kelas diawali dengan nama transisi, yaitu shiftx-enter-active dan .shiftx-leave-active. Animasi ditentukan dengan bingkai utama dari 0% hingga 100%. Ada transformasi yang ditentukan pada masing-masing bingkai utama seperti yang ditunjukkan pada kode berikut.

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

Berikut adalah keluarannya.

Saat mengklik tombol, itu berputar dari 0 hingga 360 derajat dan menghilang.

Kelas Transisi Kustom

VueJS menyediakan daftar kelas khusus, yang dapat ditambahkan sebagai atribut ke elemen transisi.

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

Kelas khusus pada dasarnya mulai berlaku ketika kita ingin menggunakan perpustakaan CSS eksternal seperti animate.css.

Contoh

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

Keluaran

Keluaran

Keluaran

Ada dua animasi yang diterapkan pada kode di atas. Satu enter-active-class = "animasi ayunan" dan satu lagi leave-active-class = "animated bounceIn". Kami menggunakan kelas animasi khusus untuk animasi yang akan diterapkan dari perpustakaan pihak ketiga.

Durasi Transisi Eksplisit

Kita dapat menerapkan transisi dan animasi pada elemen menggunakan VueJS. Vue menunggu peristiwa transionend dan animationend untuk mendeteksi apakah animasi atau transisi telah selesai.

Terkadang transisi dapat menyebabkan penundaan. Dalam kasus seperti itu, kita dapat menerapkan durasi secara eksplisit sebagai berikut.

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

Kita bisa menggunakan properti durasi dengan a: pada elemen transisi seperti yang ditunjukkan di atas. Jika ada kebutuhan untuk menentukan durasi secara terpisah untuk masuk dan keluar, itu dapat dilakukan seperti yang ditunjukkan pada kode di atas.

Kait JavaScript

Kelas transisi bisa disebut sebagai metode menggunakan event JavaScript. Mari kita pertimbangkan contoh untuk pemahaman yang lebih baik.

Contoh

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

Keluaran

Dalam contoh di atas, kami melakukan animasi menggunakan metode js pada elemen transisi.

Metode transisi diterapkan sebagai berikut -

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

Ada prefiks yang ditambahkan v-ondan nama acara tempat metode dipanggil. Metode tersebut didefinisikan dalam instance Vue sebagai berikut -

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

Transisi yang diperlukan diterapkan di masing-masing metode ini. Ada animasi opacity yang diterapkan pada klik tombol dan juga saat animasi selesai. Perpustakaan pihak ketiga digunakan untuk animasi.

Ada properti yang ditambahkan pada transisi v-bind: css = "false", yang dilakukan agar Vue memahaminya sebagai transisi JavaScript.

Transisi pada Render Awal

Untuk menambahkan animasi di awal, kita perlu menambahkan properti 'tampak' ke elemen transisi.

Mari kita lihat contoh untuk memahaminya dengan lebih baik.

Contoh

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

Dalam contoh di atas, kami telah menggunakan tiga animasi berbeda dari library animate.css. Kami telah menambahkan tampaknya ke elemen transisi.

Pada eksekusi kode di atas, berikut akan menjadi output di browser.

Animasi pada Komponen

Kita dapat membungkus transisi untuk komponen menggunakan kode berikut. Kami telah menggunakan komponen dinamis di sini.

Contoh

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

Keluaran

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