Angular Academy · पाठ

ट्रांज़िशन और टाइमिंग

ट्रांज़िशन से अवस्थाओं के बीच एनीमेशन करें

पाठ 2, कुल 4 में से13 चरण

ट्रांज़िशन और टाइमिंग, CoddyKit पर Angular Academy का एक निःशुल्क पाठ है। यह 4 में से 2वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह Angular Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Angular Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

अवस्थाओं के बीच ऐनिमेशन

अवस्थाएँ बताती हैं कि एलिमेंट कहाँ स्थिर रहता है; संक्रमण बताते हैं कि वह उनके बीच कैसे बदलता है। transition फ़ंक्शन अवस्था-परिवर्तन को ऐनिमेशन से जोड़ता है।

transition फ़ंक्शन

transition किसी अवस्था-परिवर्तन अभिव्यक्ति और एक या अधिक ऐनिमेशन चरण लेता है।

transition('closed => open', animate('300ms'))

दिशा संचालक

एक दिशा के लिए => और दोनों दिशाओं के लिए <=> का उपयोग करें।

transition('open <=> closed', animate('250ms ease-in-out'))

animate फ़ंक्शन

animate समय-निर्धारण तय करता है: अवधि, वैकल्पिक विलंब और ईज़िंग। स्ट्रिंग का प्रारूप "duration delay easing" है।

animate('500ms 100ms ease-out')

अवधि की इकाइयाँ

अवधि के लिए ms या s स्वीकार किए जाते हैं। बिना इकाई वाली संख्या को मिलीसेकंड माना जाता है।

animate('0.4s')
animate('400ms')
animate(400)

ईज़िंग फ़ंक्शन

ईज़िंग त्वरण को नियंत्रित करता है: linear, ease, ease-in, ease-out, ease-in-out या cubic-bezier()।

animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)')

इनलाइन लक्ष्य शैलियाँ

animate दूसरा style तर्क ले सकता है, ताकि ऐसे लक्ष्य-शैलियों की ओर ऐनिमेशन किया जा सके जो किसी नामित अवस्था से जुड़ी नहीं हैं।

transition('* => active', [
  animate('300ms', style({ transform: 'scale(1.1)' }))
])

एकाधिक चरण

एक ही संक्रमण के भीतर क्रम चलाने के लिए चरणों का ऐरे दें।

transition('closed => open', [
  style({ opacity: 0 }),
  animate('300ms', style({ opacity: 1 }))
])

वाइल्डकार्ड संक्रमण

किसी भी अवस्था से या किसी भी अवस्था तक के संक्रमण से मेल कराने के लिए * का उपयोग करें। यह सामान्य प्रवेश प्रभावों के लिए उपयोगी है।

transition('* => open', animate('200ms'))

प्रारंभिक शैलियाँ

animate() से पहले रखा गया साधारण style() प्रारंभिक बिंदु सेट करता है, फिर एंगुलर गंतव्य अवस्था की शैलियों तक ऐनिमेशन करता है।

transition(':enter', [
  style({ opacity: 0 }),
  animate('400ms', style({ opacity: 1 }))
])

समय-निर्धारण के सर्वोत्तम अभ्यास

यूआई संक्रमणों को प्रतिक्रियाशीलता के लिए छोटा (150-300ms) रखें। लंबी अवधि केवल बड़े और जानबूझकर किए गए गति-प्रभावों के लिए रखें। ईज़िंग को वांछित अनुभव के अनुरूप चुनें।

त्वरित जाँच

संक्रमण और समय-निर्धारण की अपनी समझ जाँचें।

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन

आपने सीखा कि transition अवस्था-परिवर्तनों ( => या <=> के साथ) को animate चरणों से जोड़ता है। समय-निर्धारण स्ट्रिंग duration delay easing होती है, और आप क्रम बनाने के लिए style तथा animate चरणों को जोड़ सकते हैं।

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 38
पाठ: 144

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “ट्रांज़िशन और टाइमिंग” पाठ निःशुल्क है?

हाँ — Angular Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “ट्रांज़िशन और टाइमिंग” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। Angular Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“ट्रांज़िशन और टाइमिंग” में मैं क्या सीखूँगा?

ट्रांज़िशन से अवस्थाओं के बीच एनीमेशन करें आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Angular Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Angular Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Angular Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 2वाँ पाठ है।

“ट्रांज़िशन और टाइमिंग” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Angular Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Angular Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← Angular Academy पर वापस जाएँ