Angular Academy · पाठ

एनीमेशन की मूल बातें: trigger और state

एनीमेशन की अवस्थाएँ और ट्रिगर परिभाषित करें

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

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

एंगुलर ऐनिमेशन

एंगुलर की ऐनिमेशन प्रणाली Web Animations API पर आधारित एक घोषणात्मक DSL है। आप अवस्थाओं और संक्रमणों का वर्णन करते हैं, और एंगुलर समय-निर्धारण तथा DOM अपडेट सँभालता है।

सेटअप

ऐनिमेशन इंजन सक्षम करने के लिए अपने बूटस्ट्रैप कॉन्फ़िगरेशन में ऐनिमेशन उपलब्ध कराएँ।

bootstrapApplication(AppComponent, {
  providers: [provideAnimationsAsync()]
});

trigger

एक trigger ऐनिमेशन का नाम बताता है और उसकी अवस्थाओं तथा संक्रमणों को समूहित करता है। आप इसे बाइंडिंग के माध्यम से किसी एलिमेंट से जोड़ते हैं।

animations: [
  trigger('openClose', [
    // states and transitions
  ])
]

अवस्थाएँ परिभाषित करना

state किसी नामित अवस्था को उन CSS शैलियों के समूह से जोड़ता है जो उस अवस्था में एलिमेंट पर होनी चाहिए।

state('open', style({ height: '200px', opacity: 1 })),
state('closed', style({ height: '0px', opacity: 0 }))

style फ़ंक्शन

style CSS प्रॉपर्टी का एक ऑब्जेक्ट लेता है। camelCase कुंजियों या उद्धरणों में लिखे CSS नामों का उपयोग करें।

style({ backgroundColor: '#1976d2', transform: 'scale(1)' })

trigger की बाइंडिंग

टेम्पलेट में @triggerName को ऐसी अभिव्यक्ति से बाँधें जो वर्तमान अवस्था लौटाती हो।

<div [@openClose]="isOpen ? 'open' : 'closed'">
  Content
</div>

एक पूर्ण trigger

यहाँ दो अवस्थाओं और उनके बीच एक संक्रमण वाला trigger दिया गया है।

trigger('openClose', [
  state('open', style({ height: '200px' })),
  state('closed', style({ height: '0px' })),
  transition('open <=> closed', animate('300ms ease'))
])

कॉम्पोनेंट से अवस्था संचालित करना

कॉम्पोनेंट केवल बूलियन या स्ट्रिंग को टॉगल करता है; एंगुलर मिलती-जुलती अवस्था की शैलियों के बीच क्रमिक बदलाव करता है।

isOpen = signal(true);
toggle() { this.isOpen.update(v => !v); }

वाइल्डकार्ड अवस्था

वाइल्डकार्ड * किसी भी अवस्था से मेल खाता है। यह डिफ़ॉल्ट तथा आगे बताए जाने वाले प्रवेश और निकास ऐनिमेशन के लिए उपयोगी है।

state('*', style({ opacity: 1 }))

void अवस्था

विशेष void अवस्था ऐसे एलिमेंट को दर्शाती है जो DOM में मौजूद नहीं है; प्रवेश और निकास ऐनिमेशन इसी पर आधारित होते हैं।

घोषणात्मक ऐनिमेशन क्यों

घोषणात्मक ऐनिमेशन समय-निर्धारण का तर्क कॉम्पोनेंट से बाहर रखते हैं, एंगुलर के जीवनचक्र के साथ एकीकृत होते हैं और एलिमेंट के DOM से बाहर जाने पर अपने-आप सफ़ाई करते हैं।

त्वरित जाँच

ऐनिमेशन की मूल बातों की अपनी समझ जाँचें।

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

पुनरावलोकन

आपने सीखा कि एंगुलर ऐनिमेशन में एक trigger होता है, जिसमें state परिभाषाएँ होती हैं (हर परिभाषा किसी नाम को style से जोड़ती है), और इसे टेम्पलेट में [@trigger] के माध्यम से बाँधा जाता है। void और * अवस्थाएँ अनुपस्थित तथा किसी भी अवस्था को दर्शाती हैं।

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

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

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

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

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

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

क्या “एनीमेशन की मूल बातें: trigger और state” पाठ निःशुल्क है?

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

“एनीमेशन की मूल बातें: trigger और state” में मैं क्या सीखूँगा?

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

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

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

“एनीमेशन की मूल बातें: trigger और state” पाठ पूरा करने में कितना समय लगता है?

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

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

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

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

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