Vue.js फ़ंक्शंस और ट्रांज़िशन प्रस्तुत करता है (हाज़िम यामासाकी वुकेलिक द्वारा अनुवादित)

नमस्कार, हेब्र! मैंने रूसी में लेखों का अनुवाद करके अपनी गतिविधि शुरू करने का फैसला किया, जिसका मुझे खुद बहुत फायदा हुआ। मुझे उम्मीद है कि आप काम में आएंगे। मैं ध्यान देता हूं कि मैंने साहित्यिक अनुवाद करने की कोशिश की, शब्दशः नहीं।


सबसे पहले, मैं हाज़िम यामासाकी वुकेलिक द्वारा "Vue.js कार्यों और संक्रमणों को प्रस्तुत करता हूं" लेख का अनुवाद प्रस्तुत कर रहा हूं।

Vue.js कार्यों और बदलावों को प्रस्तुत करता है

Vue.js दस्तावेज़ रेंडर कार्यों के बारे में खराब है। जो उपयोगकर्ता JSX को रेंडर कार्यों के साथ उपयोग करते हैं, उनके लिए यह समस्याएँ पैदा कर सकता है। इस लेख में, हम इस विशेष परिदृश्य में परिवर्तन कैसे करें, इस पर ध्यान देंगे।

मैं उदाहरणों में JSX का उपयोग करता हूं, लेकिन यह सभी सरल जावास्क्रिप्ट प्रतिपादन कार्यों के साथ काम करता है, क्योंकि JSX सिर्फ h () कॉल के लिए सिंटैक्टिक चीनी है। यदि आप इस विषय के बारे में अधिक जानना चाहते हैं, तो इस लेख को देखें ।

कैसे संक्रमण सामान्य रूप से काम करते हैं

संक्रमण का सार यह है कि आपके पास एक अंतर्निहित संक्रमण घटक है जो उन तत्वों को कक्षाएं प्रदान करता है जो माउंट किए गए हैं (दर्ज करें) या विघटित (छोड़ें)।

पिकाबू नृत्य

मुख्य बारीकियों: तत्वों की स्थापना या निराकरण की जगह का निर्धारण कैसे करें। इस समस्या को कई तरीकों से हल किया जा सकता है।

किसी तत्व की उपस्थिति / गायब होने को लागू करने के लिए आप टर्नरी ऑपरेटर का उपयोग कर सकते हैं:

render(h) { <transition> {this.showDiv ? <div class="myDiv">Hello</div> : null} </transition> } 

या एक आइटम को दूसरे के साथ बदलने के लिए:

 render(h) { <transition> {this.showOneOrTheOther ? <div class="myDiv">Hello</div> : <div class="myOtherDiv">Hello again</div> } </transition> } 

नहीं, मैं तो मजाक कर रहा था। बेशक, आप ऐसे तत्वों को बदलने के लिए अतिरिक्त मापदंडों के बिना टर्नरी ऑपरेटर का उपयोग नहीं कर सकते। हालांकि, वहाँ एक अति सूक्ष्म अंतर है। तुलना एल्गोरिथ्म यह तय करता है कि वहां पहले से ही एक तत्व मौजूद है, इसलिए इसे DOM से हटाने के बजाय, यह इसे ठीक करता है ताकि यह दूसरे तत्व की तरह दिखे।

तत्वों को प्रतिस्थापित करते समय कुंजी का उपयोग करें तो बेहतर होगा:

 render(h) { <transition> {this.showOneOrTheOther ? <div key="myDiv" class="myDiv">Hello</div> : <div key="myOtherDiv" class="myOtherDiv">Hello again</div> } </transition> } 

यदि कोई कुंजी है, तो दो तत्व पूरी तरह से बदल जाते हैं (पुराने को हटा दिया जाता है, और नया अपने स्थान पर घुड़सवार होता है), जबकि चाबियाँ अलग होती हैं।

इसी तरह, यदि आप किसी घटक या तत्व को उसी घटक / तत्व से दूसरे में स्वैप करना चाहते हैं:

 render(h) { <transition> <div key={this.subcomponentKey}> <MyComponent /> </div> </transition> } 

उपरोक्त उदाहरण में, यह। SubcomponentKey विधि किसी तरह MyComponent घटक के लिए संबंधित कुंजी की गणना करने जा रही है।

मुख्य अंतर

जब हम कुंजियों के बारे में बात कर रहे हैं, तो याद रखें कि जब कुंजी बदली जाती है तो तत्व / घटक हमेशा पूरी तरह से प्रदर्शित होते हैं। दूसरी ओर, जब तक कुंजी समान रहती है, तत्व / घटक नहीं बदलते हैं।

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

एनीमेशन जोड़ना

अब जब हम जानते हैं कि हमारे तत्वों को कैसे बनाया जाए और वे वापस आ जाएं, तो एनीमेशन पर काम करने का समय आ गया है।

सबसे सरल मामले में, हमारे पास दो कक्षाएं हैं। एक वर्ग हमेशा लागू होता है, और दूसरा तब लागू किया जाता है जब कोई तत्व / घटक इकट्ठा या विघटित हो जाता है।

 // my.css .base { transition: transform 1s; } .out { transform: translateX(-100vw); } 

अब इन वर्गों को कोड में जोड़ें:

 render(h) { <transition enter-class="out" leave-to-class="out"> {this.someProp ? <div class="base">Hello</div> : null} </transition> } 

इन कक्षाओं (एंटर-क्लास और लीव-टू-क्लैस) को प्रलेखन में अच्छी तरह से वर्णित किया गया है । उनके बारे में वहां पढ़ें।

एंट-क्लास उन शैलियों के लिए एक भंडार के रूप में कार्य करता है जो किसी तत्व को बढ़ते हुए तुरंत लागू करते हैं। इसके तुरंत बाद, क्लास को हटा दिया जाता है। हम उस समय के बीच एक एनीमेशन बनाने के लिए संक्रमण जोड़ते हैं जब प्रवेश-वर्ग का उपयोग किया जाता है और वह समय जब वह नहीं होता है (जब केवल .base वर्ग का उपयोग किया जाता है)।

किसी आइटम को हटाने से तुरंत पहले क्लास से क्लास को लागू किया जाता है। Vue.js तब एनीमेशन के पूरा होने की प्रतीक्षा करता है, और फिर DOM ट्री से आइटम हटाता है। फिर, हम एनिमेशन बनाने के लिए संक्रमण का उपयोग करते हैं।

हमारे उदाहरण में, हमने प्रवेश करने और बाहर निकलने के लिए समान .out वर्ग का उपयोग किया था, लेकिन हम दो घटनाओं के लिए विभिन्न वर्गों का उपयोग कर सकते हैं।

निष्कर्ष

मुझे उम्मीद है कि अब आप प्रतिपादन कार्यों में और JSX के साथ उपयोग किए जाने वाले Vue.js संक्रमण की प्रमुख अवधारणाओं को समझेंगे। हालाँकि, Vue.js संक्रमण बहुत अधिक सुविधाएँ प्रदान करते हैं, जैसे कि जावास्क्रिप्ट का उपयोग करके संक्रमण की घटनाओं से जुड़ने की क्षमता और इसलिए, एनीमेशन से संबंधित कुछ चीजें भी नहीं करना चाहिए (जैसे जीवनचक्र जाल की तरह)। मैं यहां लेख को समाप्त कर दूंगा और अपने प्रिय पाठकों के लिए प्रयोग छोड़ दूंगा।

हैप्पी हैकिंग!