मैं पिछले कुछ समय से स्क्रीन पर तत्वों को एनिमेट करने के लिए अपने प्रोजेक्ट्स में उसी एनीमेशन पैटर्न का उपयोग कर रहा हूं। इसके सरलतम रूप में, आपके पास शून्य की अपारदर्शिता के साथ स्टाइल वाला एक तत्व होगा, फिर एक सेकंड के सीएसएस संक्रमण के साथ एक की अपारदर्शिता के लिए स्टाइल को बदलें। हम संक्रमण करने वाले अन्य गुणों को जोड़कर, अवधि को बदलकर, देरी जोड़कर, या कस्टम ईज़िंग सेट करके इसके शीर्ष पर निर्माण कर सकते हैं। एक पुन: प्रयोज्य रिएक्ट घटक है जिसे मैंने जब भी अपनी परियोजनाओं में शीघ्रता से कुछ एनीमेशन प्रभाव जोड़ना चाहता हूं, शामिल कर लिया है। एक सरल उपयोगिता घटक, यह न्यूनतम प्रयास के साथ तरल, आंख को पकड़ने वाले एनिमेशन बनाने के लिए सीएसएस एनीमेशन को टेलविंड कक्षाओं के साथ जोड़ता है। <AnimateIn/> आइए देखें कि इसका उपयोग कैसे किया जाता है। घटक आयात करने के बाद, टेलविंड कक्षाओं के साथ राज्यों और परिभाषित करें। एनीमेशन को जीवंत होते देखने के लिए लक्ष्य तत्व को के भीतर लपेटें। from to <AnimateIn/> import AnimateIn from '../animation/AnimateIn'; <AnimateIn from="opacity-0 scale-90" to="opacity-100 scale-100" duration={500} > <YourComponent /> </AnimateIn> यहां थोड़ा अधिक जटिल उदाहरण दिया गया है जो शीर्षक और उपशीर्षक में चेतन करने के लिए अधिक गुणों का उपयोग करता है। import AnimateIn from '../animation/AnimateIn'; <header> <AnimateIn as="h1" from="opacity-0 translate-y-32" to="opacity-100 translate-y-0" delay={500} duration={300} className="text-4xl" style={{transitionTimingFunction:"cubic-bezier(0.25, 0.4, 0.55, 1.4)"}} > My Big Headline </AnimateIn> <AnimateIn as="h2" from="opacity-0 scale-0" to="opacity-100 scale-100" delay={800} duration={500} className="text-lg" > This is a subtitle below the headline </AnimateIn> </header> शीर्षक उदाहरण में, उपयोग फ़ेड-इन के साथ संयुक्त स्लाइडिंग प्रभाव बनाने के लिए किया जाता है। यहां बताया गया है कि प्रत्येक संपत्ति एनीमेशन में कैसे योगदान देती है: <AnimateIn/> का संपत्ति : सेट करके, हम AnimateIn को एनीमेशन को तत्व के रूप में प्रस्तुत करने के लिए कहते हैं। as as="h1" <h1> और संपत्तियों : संपत्ति शीर्षक को ऑफ-स्क्रीन शुरू करती है ( , इसे 32 इकाइयों को नीचे ले जाती है) और अदृश्य ( )। फिर शीर्षक को उसकी अंतिम स्थिति में लाती है (वापस पर) और इसे पूरी तरह से दृश्यमान बनाती है ( )। from to from translate-y-32 opacity-0 to translate-y-0 opacity-100 संपत्ति: एनीमेशन बिना किसी देरी के तुरंत शुरू होने के लिए सेट है और त्वरित 300ms तक चलता है। duration संपत्ति: फ़ॉन्ट आकार सेट करने के लिए टेलविंड की उपयोगिता क्लास को लागू करता है, जिससे शीर्षक प्रमुखता से सामने आता है। className className="text-4xl" प्रॉपर्टी: कस्टम ( ) एनीमेशन में एक अद्वितीय आसानी जोड़ता है, जिससे इसे बाउंस जैसा प्रभाव मिलता है। style transitionTimingFunction cubic-bezier(0.25, 0.4, 0.55, 1.4) उपशीर्षक एक सुसंगत दृश्य प्रवाह बनाते हुए, शीर्षक को पूरक करने के लिए एनिमेशन के एक अलग सेट का उपयोग करता है। संपत्ति : यहां, घटक को एक तत्व के रूप में प्रस्तुत करता है, जो उपशीर्षक के लिए उपयुक्त है। as as="h2" <h2> और गुणों : उपशीर्षक को शून्य ( ) और अदृश्य ( ) तक स्केल किया जाता है, फिर अपने प्राकृतिक आकार ( ) तक बढ़ाया जाता है और पूरी तरह से दृश्यमान ( ) हो जाता है। फ़ेड-इन के साथ जोड़ा गया यह स्केलिंग प्रभाव एनीमेशन में गहराई जोड़ता है। from to scale-0 opacity-0 scale-100 opacity-100 और गुण: उपशीर्षक भी 800 एमएस विलंब के बाद शुरू होता है ताकि यह शीर्षक के पूरी तरह से एनिमेटेड होने के बाद शुरू हो। यह क्रमबद्ध दृष्टिकोण सुनिश्चित करता है कि प्रत्येक तत्व को फोकस का क्षण मिले। delay duration संपत्ति: उपशीर्षक का फ़ॉन्ट आकार सेट करता है, जिससे यह शीर्षक से छोटा होता है लेकिन फिर भी महत्वपूर्ण होता है। className className="text-lg" क्या हो रहा है इसे बेहतर ढंग से समझने के लिए, आइए के स्रोत कोड को देखें: Github पर <AnimateIn/> एनीमेशन स्थिति को संपत्ति के साथ आरंभ करने के लिए एक हुक का उपयोग करता है, जो एक या अधिक टेलविंड उपयोगिता वर्ग होना चाहिए, जो किसी भी एनीमेशन के होने से पहले एनीमेशन के शुरुआती बिंदु के लिए चरण निर्धारित करता है। <AnimateIn/> from useState घटक में पहला हुक कम गति के लिए उपयोगकर्ता की प्राथमिकताओं का सम्मान करने के लिए है। मीडिया क्वेरी को सुनकर, एनीमेशन व्यवहार उपयोगकर्ता की सिस्टम सेटिंग्स पर आधारित होता है। यदि कम गति को प्राथमिकता दी जाती है, तो एनीमेशन को पूरी तरह से छोड़ दिया जाता है, एनीमेशन स्थिति को सीधे प्रॉपर्टी पर सेट किया जाता है, जिससे एक सुलभ अनुभव प्राप्त होता है। useEffect (prefers-reduced-motion: reduce) to दूसरा हुक वह जगह है जहां एनीमेशन तर्क रहता है। यदि उपयोगकर्ता ने कम गति के लिए प्राथमिकता का संकेत नहीं दिया है, तो घटक एक टाइमर सेट करता है जो निर्दिष्ट देरी के बाद एनीमेशन स्थिति को शुरुआती मूल्य अंतिम मूल्य बदलता है। यह परिवर्तन एनीमेशन का दृश्य प्रभाव पैदा करता है। useEffect from to इस हुक का क्लीनअप फ़ंक्शन (रिटर्न स्टेटमेंट) टाइमर को साफ़ करता है, संभावित मेमोरी लीक को रोकता है जैसे कि एनीमेशन पूरा होने से पहले घटक अनमाउंट हो जाता है। फ़ंक्शन कॉल घटक का रेंडरिंग तंत्र है। यह गतिशील रूप से प्रोप के आधार पर एक HTML तत्व बनाता है, जो विभिन्न HTML तत्वों में घटक के उपयोग की अनुमति देता है। निर्माण फ़ंक्शन का उपयोग करके किया गया है, जो टेलविंड की उपयोगिता कक्षाओं, एक प्रोप के रूप में पारित कस्टम और वर्तमान एनीमेशन स्थिति को जोड़ता है। यह गतिशील वर्ग असाइनमेंट वह है जो तत्व में वांछित शैलियों और बदलावों को लागू करता है। React.createElement as className shadcn द्वारा लोकप्रिय cn className इसके अतिरिक्त, एक विशेषता है जिसे एनीमेशन कंटेनर पर सीधे स्टाइलिंग गुणों को सेट करने के लिए पारित किया जा सकता है। प्रोप के आधार पर निर्धारित की जाती है, लेकिन यदि उपयोगकर्ता कम गति पसंद करता है तो यह बुद्धिमानी से पर स्विच हो जाता है, घटक की कार्यक्षमता को बनाए रखते हुए एनीमेशन को प्रभावी ढंग से अक्षम कर देता है। style transitionDuration duration 0ms यदि आप अपने स्वयं के प्रोजेक्ट में का उपयोग करना चाहते हैं और यह पहले से ही उपयोग करता है, तो आपके पास पहले से ही वह सब कुछ है जो आपको चाहिए, बस और इसे अपने घटकों में जोड़ें। <AnimateIn/> shadcn का AnimateIn.tsx डाउनलोड करें अन्यथा, आप टेलविंड कक्षाओं को मर्ज करने के लिए साथ-साथ चाहेंगे। सहायक उपयोगिता mxcn टेलविंड भी इंस्टॉल करना Shadcn की तरह, <AnimateIn/> का मतलब एक पुन: प्रयोज्य घटक है जिसे आप कॉपी करके अपने ऐप्स में पेस्ट कर सकते हैं और अपनी आवश्यकताओं के अनुसार अनुकूलित कर सकते हैं। कोड आपका है. इसके अलावा, मैंने के साथ पर अलग-अलग एनिमेशन बनाने के लिए एक अच्छा डेमो पेज भी तैयार किया है। <AnimateIn/> animate-in.vercel.app भी प्रकाशित किया गया यहाँ
