एनिमेशन जोड़कर अपने Vue एप्लिकेशन के लुक और फील को बेहतर बनाएं।

ट्रांज़िशन और एनिमेशन उपयोगकर्ता अनुभव में एक प्रमुख भूमिका निभाते हैं। वेब पेज पर तत्वों के बीच सूक्ष्म एनिमेशन और संक्रमण जोड़कर, आप उपयोगकर्ता के अनुभव को बढ़ा सकते हैं। पूरे समय वेबसाइट अधिक चिकनी, अधिक आकर्षक और आम तौर पर बेहतर दिखाई देगी।

यह ट्यूटोरियल दर्शाता है कि Vue.js में ट्रांज़िशन और एनिमेशन कैसे कार्यान्वित करें। आप इसका उपयोग करके सरल ट्रांज़िशन और जटिल एनिमेशन दोनों बनाना सीखेंगे संक्रमण घटक और सीएसएस keyframes।

Vue.js संक्रमण घटक

Vue.js में एक अंतर्निहित है संक्रमण घटक जो आपको अपने ऐप में एनिमेशन बनाने देता है। यह घटक लक्ष्य तत्व के चारों ओर लपेटता है जिसे हम एनिमेट करना चाहते हैं।

यहां संक्रमण घटक स्तर-एक शीर्षलेख को लपेटता है:


 हैलो </h1>
</transition>

जब आप किसी तत्व को लपेटते हैं संक्रमण घटक, घटक संक्रमण वर्गों को उस तत्व पर लागू करेगा जो इसे लपेटता है। कुल छह संक्रमण वर्ग हैं। पृष्ठ में प्रवेश करते ही तत्व के एनीमेशन को तीन नियंत्रित करते हैं। अन्य तीन तत्व के एनीमेशन को नियंत्रित करते हैं क्योंकि यह पृष्ठ को छोड़ देता है।

instagram viewer

इस आलेख में प्रयुक्त कोड इसमें उपलब्ध है गिटहब रिपॉजिटरी और आपके लिए एमआईटी लाइसेंस के तहत उपयोग करने के लिए स्वतंत्र है।

तत्वों के पृष्ठ में प्रवेश करने पर ट्रांज़िशन क्लासेस को लागू करना

डोम में प्रवेश करने वाले तत्व की प्रक्रिया के दौरान, संक्रमण घटक वर्ग लागू करता है प्रवेश-से, में दर्ज, और प्रवेश-सक्रिय इसे। ये कक्षाएं आपको यह नियंत्रित करने की अनुमति देती हैं कि तत्व कैसे पृष्ठ पर एनिमेट या ट्रांज़िट करेगा।

  • प्रवेश-से: ब्राउज़र में प्रवेश करने से पहले तत्व पर लागू होता है। आप इस वर्ग का उपयोग तत्व की प्रारंभिक सीएसएस स्थिति सेट करने के लिए करते हैं।
  • में दर्ज: ब्राउज़र में प्रवेश करते ही तत्व पर लागू होता है. आप तत्व की अंतिम सीएसएस स्थिति सेट करने के लिए इस वर्ग का उपयोग करते हैं।
  • प्रवेश-सक्रिय: तब लागू किया जाता है जब तत्व एक अवस्था से दूसरी अवस्था में संक्रमण कर रहा होता है। यह वह जगह है जहां आप तय करते हैं कि संक्रमण में कितना समय लगेगा।

आइए एक उदाहरण देखें:

<संक्रमण>
 <एच 1> नमस्तेएच 1>
संक्रमण>
.प्रवेश-से {
अस्पष्टता: 0;
}


।में दर्ज {
अस्पष्टता: 1;
}
.प्रवेश-सक्रिय {
संक्रमण: अस्पष्टता 2एसआराम;
}

इस कोड के साथ, लेवल-वन हेडर को अदृश्य से संक्रमण में दो सेकंड लगते हैं (अस्पष्टता: 0) पूरी तरह से दिखाई देने के लिए (अस्पष्टता: 1). यह परिवर्तन तब होता है जब तत्व DOM में प्रवेश करता है। संक्रमण के बिना, पेज लोड होते ही टेक्स्ट ब्राउज़र पर तुरंत दिखाई देने लगेगा।

जब तत्व पृष्ठ छोड़ते हैं तो ट्रांज़िशन क्लास लागू करना

संक्रमण घटक तीन अन्य संक्रमण वर्गों का समर्थन करता है जिन्हें आपको तब लागू करने की आवश्यकता होती है जब तत्व DOM छोड़ रहा हो। उनके नाम हैं से छोड़ना, पर छोड़ दो, और छुट्टी सक्रिय. ये वर्ग नियंत्रित करते हैं कि तत्व पृष्ठ से कैसे एनिमेट या ट्रांज़िट करेगा।

जैसा कि आपने अनुमान लगाया होगा, ये वर्ग समान हैं प्रवेश करना- जिन कक्षाओं की हमने पहले चर्चा की थी। लेकिन ये वर्ग तभी सक्रिय होते हैं जब तत्व DOM से अनमाउंट होने वाला हो। माउंटिंग और अनमाउंटिंग DOM की महत्वपूर्ण अवधारणाएँ हैं। एक डेवलपर के रूप में, आपके पास एक होना चाहिए डोम की बुनियादी समझ और अन्य संबंधित अवधारणाएँ।

आइए एक उदाहरण देखें:

<संक्रमण>
 <एच 1> नमस्तेएच 1>
संक्रमण>
।से छोड़ना {
अस्पष्टता: 0;
}


।पर छोड़ दो {
अस्पष्टता: 1;
}
छुट्टी-सक्रिय {
संक्रमण: अस्पष्टता 2एसआराम;
}

इस मामले में, लेवल-वन हेडर को दृश्यमान से धीरे-धीरे परिवर्तित होने में दो सेकंड लगते हैं (अस्पष्टता: 1) से अदृश्य (अस्पष्टता: 0). यह परिवर्तन तब होता है जब तत्व DOM को छोड़ देता है। संक्रमण के बिना, पाठ तुरंत ब्राउज़र से गायब हो जाता।

संक्रमण नामों का उपयोग करना

आप ए भी जोड़ सकते हैं नाम आपके संक्रमण घटक के लिए विशेषता। जब आप ऐसा करते हैं, तो Vue आपकी ट्रांज़िशन क्लास में नाम जोड़ देगा। इसका मतलब है कि आप अपने पेज पर कई ट्रांज़िशन कर सकते हैं, प्रत्येक में अद्वितीय ट्रांज़िशन क्लास और CSS गुण हैं।

उदाहरण के लिए, यदि आप नाम सेट करते हैं हल्का होना आपके संक्रमण घटक पर, तो सभी संक्रमण वर्गों के साथ उपसर्ग किया जाएगा हल्का होना:

<संक्रमणनाम ="हल्का होना">
 <एच 1> नमस्तेएच 1>
संक्रमण>
.फीका-प्रवेश-से {
अस्पष्टता: 1;
}
.फीका-छोड़ना-से {
अस्पष्टता: 1;
}
// अन्य "प्रवेश करना" और "छुट्टी" कक्षाओंसाथहल्का होनाजैसाउपसर्ग

ट्रांज़िशन घटक का उपयोग करके ट्रांज़िशन बनाना

Vue.js में ट्रांज़िशन प्रदर्शित करने के लिए, आप एक रैप करेंगे एच 1 के अंदर संक्रमण अवयव। नीचे, आप एक बटन बनाएंगे। जब यह बटन क्लिक किया जाता है, तो यह वेरिएबल को टॉगल करता है शीर्षक दिखाओ बीच में असत्य और सत्य.

यहाँ कोड है:

अगला, परिभाषित करें लिखी हुई कहानी अनुभाग। इस खंड में शामिल है स्थापित करना विधि जहाँ आप प्रारंभ करते हैं शीर्षक दिखाओ के साथ परिवर्तनशील असत्य.