असममित ट्रांज़िशन के लिए in: और out:
एलिमेंट में प्रवेश और उससे बाहर निकलने के लिए अलग-अलग ट्रांज़िशन निर्दिष्ट करें।
असममित ट्रांज़िशन के लिए in: और out:, CoddyKit पर Sveltejs Academy का एक निःशुल्क पाठ है। यह 4 में से 3वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Sveltejs Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Sveltejs Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
असममितता क्यों
कभी-कभी आप किसी एलिमेंट के अंदर आने और बाहर जाने के लिए अलग-अलग ऐनिमेशन चाहते हैं।
in: निर्देश
ट्रांज़िशन केवल एलिमेंट के डाले जाने पर लागू करें।
<p in:fly={{ y: 50 }}>Enter</p>out: निर्देश
ट्रांज़िशन केवल एलिमेंट के हटाए जाने पर लागू करें।
<p out:fade>Leave</p>दोनों को मिलाना
पूरी तरह कस्टम अंदर आने और बाहर जाने वाले ऐनिमेशन के लिए एक ही एलिमेंट पर दोनों निर्देशों का उपयोग करें।
<p in:fly={{ y: 50 }} out:fade={{ duration: 200 }}>...</p>अलग-अलग फ़ंक्शन
अंदर आने और बाहर जाने वाले ट्रांज़िशन पूरी तरह अलग फ़ंक्शन हो सकते हैं (fly बनाम fade)।
अलग-अलग पैरामीटर
हर दिशा के लिए अलग अवधि, विलंब या ईज़िंग भेजें।
#if ब्लॉक में उपयोग
सामान्य ट्रांज़िशन की तरह, एलिमेंट को रिएक्टिव रूप से बनाया या हटाया जाना चाहिए।
transition: और in:/out: दोनों से बचें
सममित प्रभाव के लिए transition: या असममित प्रभाव के लिए in:/out: में से एक चुनें। दोनों को मिलाने से टकराव होता है।
वास्तविक उदाहरण
कोई टोस्ट ऊपर से अंदर आ सकता है और अपनी जगह पर fade होकर बाहर जा सकता है।
<div in:fly={{ y: -50 }} out:fade>{message}</div>प्रदर्शन
हर ट्रांज़िशन CPU का उपयोग करता है। बड़ी सूचियों पर इनका संयम से उपयोग करें।
पुनरावलोकन पैटर्न
असममित ट्रांज़िशन UI को बेहतर बनाने का आसान तरीका हैं — प्रवेश आकर्षक लगता है और निकास तेज़।
त्वरित जाँच
in: और out: में क्या अंतर है?
पुनरावलोकन
प्रवेश के लिए in: और निकास के लिए out: का उपयोग करें। असममित, बेहतर ट्रांज़िशन के लिए दोनों को मिलाएँ।
एआई शिक्षक के साथ HTML सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 41
- पाठ
- 163
अक्सर पूछे जाने वाले प्रश्न
क्या “असममित ट्रांज़िशन के लिए in: और out:” पाठ निःशुल्क है?
हाँ—“असममित ट्रांज़िशन के लिए in: और out:” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Sveltejs Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Sveltejs Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“असममित ट्रांज़िशन के लिए in: और out:” में मैं क्या सीखूँगा?
एलिमेंट में प्रवेश और उससे बाहर निकलने के लिए अलग-अलग ट्रांज़िशन निर्दिष्ट करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Sveltejs Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या Sveltejs Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Sveltejs Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 3वाँ पाठ है।
“असममित ट्रांज़िशन के लिए in: और out:” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस Sveltejs Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर Sveltejs Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- transition:fade और transition:fly
- ट्रांज़िशन पैरामीटर: duration delay easing
- असममित ट्रांज़िशन के लिए in: और out:
- SVG Paths के लिए transition:draw