VueJS - संक्रमण और एनीमेशन

इस अध्याय में, हम VueJS में उपलब्ध संक्रमण और एनीमेशन सुविधाओं पर चर्चा करेंगे।

TRANSITION

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>

वहाँ बटन को क्लिकमेम बनाया जाता है जिसका उपयोग करके हम वेरिएबल शो के मूल्य को सही से गलत और इसके विपरीत में बदल सकते हैं। वहां एक हैp tagयदि चर सत्य है, तो केवल पाठ तत्व दिखाता है। हमने पी टैग को संक्रमण तत्व के साथ लपेट दिया है जैसा कि निम्नलिखित कोड में दिखाया गया है।

<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 को एक साथ परिभाषित किया गया है और यह प्रारंभ और छोड़ने के चरण में एक संक्रमण लागू करता है। अपारदर्शिता गुण को 2 सेकंड में 0 में बदल दिया जाता है।

अवधि को .fade_enter_active और .fade_leave_active में परिभाषित किया गया है। अंतिम चरण को .fade_enter, .fade_leave_to में परिभाषित किया गया है।

ब्राउज़र में डिस्प्ले इस प्रकार है।

बटन पर क्लिक करने पर, पाठ दो सेकंड में दूर हो जाएगा।

दो सेकंड के बाद, पाठ पूरी तरह से गायब हो जाएगा।

आइए एक और उदाहरण पर विचार करें, जहां एक छवि है और बटन क्लिक करने पर इसे एक्स-एक्सिस पर स्थानांतरित किया जाता है।

उदाहरण

<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। कोड के निम्नलिखित टुकड़े का उपयोग करके एक्स-अक्ष पर छवि को 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-leave-active। एनीमेशन को केफ्रेम के साथ 0% से 100% तक परिभाषित किया गया है। प्रत्येक keyframes में परिभाषित एक परिवर्तन है जैसा कि निम्नलिखित कोड कोड में दिखाया गया है।

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

उत्पादन

उपरोक्त कोड में दो एनिमेशन लगाए गए हैं। एक प्रवेश-सक्रिय-वर्ग = "एनिमेटेड स्विंग" और दूसरा अवकाश-सक्रिय-वर्ग = "एनिमेटेड उछाल"। हम एनीमेशन के लिए कस्टम एनीमेशन कक्षाओं का उपयोग तीसरे पक्ष के पुस्तकालय से लागू करने के लिए कर रहे हैं।

स्पष्ट संक्रमण अवधि

हम VueJS का उपयोग करके तत्व पर संक्रमण और एनीमेशन लागू कर सकते हैं। Vue ट्रांसिओनेंड और एनीमेशनेंड इवेंट की प्रतीक्षा करता है ताकि यह पता लगाया जा सके कि एनीमेशन या संक्रमण हुआ है या नहीं।

कभी-कभी संक्रमण देरी का कारण बन सकता है। ऐसे मामलों में, हम इस अवधि को स्पष्ट रूप से निम्नानुसार लागू कर सकते हैं।

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

हम ऊपर दिखाए गए अनुसार संक्रमण तत्व पर a: के साथ अवधि गुण का उपयोग कर सकते हैं। मामले में प्रवेश करने और छोड़ने के लिए अलग से अवधि निर्दिष्ट करने की आवश्यकता है, इसे कोड के उपरोक्त टुकड़े में दिखाया गया है।

जावास्क्रिप्ट हुक

जावास्क्रिप्ट घटनाओं का उपयोग करके संक्रमण वर्गों को विधियों के रूप में कहा जा सकता है। आइए हम बेहतर समझ के लिए एक उदाहरण पर विचार करें।

उदाहरण

<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 समझता है कि यह एक जावास्क्रिप्ट संक्रमण है।

प्रारंभिक रेंडर में संक्रमण

प्रारंभ में एनीमेशन जोड़ने के लिए, हमें संक्रमण तत्व में 'प्रकट' गुण जोड़ना होगा।

आइए इसे बेहतर समझने के लिए एक उदाहरण देखें।

उदाहरण

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

उत्पादन