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 สร้างขึ้นโดยใช้ซึ่งเราสามารถเปลี่ยนค่าของการแสดงตัวแปรเป็นจริงเป็นเท็จและในทางกลับกัน มีp tagซึ่งจะแสดงองค์ประกอบข้อความก็ต่อเมื่อตัวแปรนั้นเป็นจริง เราได้รวมแท็ก 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_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 ถูกกำหนดร่วมกันและจะใช้การเปลี่ยนแปลงที่จุดเริ่มต้นและที่ระยะออก คุณสมบัติความทึบจะเปลี่ยนเป็น 0 ใน 2 วินาที

ระยะเวลาถูกกำหนดไว้ใน. fade_enter_active และ. fade_leave_active ขั้นตอนสุดท้ายถูกกำหนดใน. fade_enter, .fade_leave_to

การแสดงผลในเบราว์เซอร์มีดังนี้

เมื่อคลิกปุ่มข้อความจะจางหายไปภายในสองวินาที

หลังจากผ่านไปสองวินาทีข้อความจะหายไปอย่างสมบูรณ์

ให้เราพิจารณาอีกตัวอย่างหนึ่งซึ่งมีรูปภาพและถูกเลื่อนไปบนแกน 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. คุณสมบัติการแปลงใช้เพื่อเลื่อนรูปภาพบนแกน x 100px โดยใช้โค้ดต่อไปนี้

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

ต่อไปนี้คือผลลัพธ์

เมื่อคลิกปุ่มรูปภาพจะเลื่อนไปทางขวา 100px ตามที่แสดงในภาพหน้าจอต่อไปนี้

ภาพเคลื่อนไหว

ภาพเคลื่อนไหวถูกนำไปใช้ในลักษณะเดียวกับการเปลี่ยนภาพ แอนิเมชั่นยังมีคลาสที่ต้องประกาศเพื่อให้เอฟเฟกต์เกิดขึ้น

ให้เราพิจารณาตัวอย่างเพื่อดูว่าภาพเคลื่อนไหวทำงานอย่างไร

ตัวอย่าง

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

ต่อไปนี้คือผลลัพธ์

เมื่อคลิกปุ่มปุ่มจะหมุนจาก 0 ถึง 360 องศาและหายไป

คลาสการเปลี่ยนที่กำหนดเอง

VueJS มีรายการคลาสแบบกำหนดเองซึ่งสามารถเพิ่มเป็นแอตทริบิวต์ให้กับองค์ประกอบการเปลี่ยนแปลงได้

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

โดยพื้นฐานแล้วคลาสที่กำหนดเองจะเข้ามามีบทบาทเมื่อเราต้องการใช้ไลบรารี CSS ภายนอกเช่น animate.css

ตัวอย่าง

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

เอาต์พุต

มีสองภาพเคลื่อนไหวที่ใช้ในโค้ดด้านบน enter-active-class = "animated swing" และอีกตัว leave-active-class = "animatedounceIn" เรากำลังใช้คลาสแอนิเมชั่นที่กำหนดเองสำหรับแอนิเมชั่นที่จะใช้จากไลบรารีของบุคคลที่สาม

ระยะเวลาการเปลี่ยนที่ชัดเจน

เราสามารถใช้การเปลี่ยนแปลงและการเคลื่อนไหวกับองค์ประกอบโดยใช้ VueJS Vue รอให้เหตุการณ์ transionend และ animationend ตรวจพบว่าการเคลื่อนไหวหรือการเปลี่ยนเสร็จสิ้น

บางครั้งการเปลี่ยนแปลงอาจทำให้เกิดความล่าช้า ในกรณีเช่นนี้เราสามารถใช้ระยะเวลาอย่างชัดเจนได้ดังนี้

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

เราสามารถใช้คุณสมบัติระยะเวลากับ a: บนองค์ประกอบการเปลี่ยนแปลงดังที่แสดงด้านบน ในกรณีที่จำเป็นต้องระบุระยะเวลาในการเข้าและออกแยกกันสามารถทำได้ดังที่แสดงไว้ในโค้ดด้านบน

JavaScript Hooks

คลาสการเปลี่ยนแปลงสามารถเรียกว่าเป็นวิธีการโดยใช้เหตุการณ์ 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>

เอาต์พุต

ในตัวอย่างข้างต้นเรากำลังแสดงภาพเคลื่อนไหวโดยใช้วิธี 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

การเปลี่ยนที่การเรนเดอร์เริ่มต้น

ในการเพิ่มภาพเคลื่อนไหวในตอนเริ่มต้นเราจำเป็นต้องเพิ่มคุณสมบัติ "ปรากฏ" ให้กับองค์ประกอบการเปลี่ยนแปลง

มาดูตัวอย่างเพื่อทำความเข้าใจกันดีกว่า

ตัวอย่าง

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

ในตัวอย่างข้างต้นเราได้ใช้ภาพเคลื่อนไหวที่แตกต่างกันสามแบบจากไลบรารี animate.css เราได้เพิ่มปรากฏในองค์ประกอบการเปลี่ยนแปลง

ในการดำเนินการของโค้ดด้านบนต่อไปนี้จะเป็นผลลัพธ์ในเบราว์เซอร์

ภาพเคลื่อนไหวบนส่วนประกอบ

เราสามารถสรุปการเปลี่ยนแปลงสำหรับส่วนประกอบโดยใช้รหัสต่อไปนี้ เราได้ใช้องค์ประกอบไดนามิกที่นี่

ตัวอย่าง

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

เอาต์พุต