Vue Academy · पाठ

रूट ट्रांज़िशन और ऐनिमेशन

Transition के साथ RouterView, रूट के आधार पर transition-name और रूट के बीच स्लाइड/फेड प्रभाव

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

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

रूटों के बीच ऐनिमेशन करना

URL बदलने पर मिलान किया गया घटक तुरंत बदल जाता है। दृश्य को Vue के Transition में लपेटकर आप पृष्ठों के बीच फ़ेड या स्लाइड कर सकते हैं, जिससे अनुभव अधिक सहज होता है।

v-slot के साथ RouterView

ऐनिमेशन करने के लिए आपको हल किए गए घटक तक पहुँच चाहिए। RouterView का स्कोप्ड स्लॉट रूप Component और route उपलब्ध कराता है।

<RouterView v-slot="{ Component }">
  <component :is="Component" />
</RouterView>

Transition से लपेटना

डायनेमिक component के चारों ओर Transition रखिए। रूट घटक के माउंट और अनमाउंट होने पर Vue प्रवेश और निकास क्लास लागू करता है।

<RouterView v-slot="{ Component }">
  <Transition name="fade" mode="out-in">
    <component :is="Component" />
  </Transition>
</RouterView>

mode out-in क्यों

mode के बिना पुराना और नया पृष्ठ एक ही समय पर ऐनिमेट होते हैं और एक-दूसरे पर आ जाते हैं। mode="out-in" नए पृष्ठ के प्रवेश से पहले पुराने पृष्ठ के निकलने की प्रतीक्षा करता है।

CSS परिभाषित करना

name CSS क्लास का उपसर्ग बन जाता है। फ़ेड के लिए प्रवेश और निकास ट्रांज़िशन परिभाषित कीजिए।

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>

मेटा के माध्यम से प्रति-रूट ट्रांज़िशन

रूट meta में ट्रांज़िशन का नाम रखें, ताकि अलग-अलग रूट अलग तरह से ऐनिमेट हों — एक भाग के लिए स्लाइड और दूसरे के लिए फ़ेड।

{ path: '/about', component: About, meta: { transition: 'slide' } }

ट्रांज़िशन नाम निर्धारित करना

स्लॉट से route.meta.transition पढ़िए और उसे Transition के नाम से बाँधिए; यदि वह उपलब्ध न हो, तो डिफ़ॉल्ट नाम का उपयोग कीजिए।

<RouterView v-slot="{ Component, route }">
  <Transition :name="route.meta.transition || 'fade'" mode="out-in">
    <component :is="Component" />
  </Transition>
</RouterView>

दिशा के अनुसार स्लाइड

आप नेविगेशन की दिशा के आधार पर ट्रांज़िशन को गतिशील रूप से चुन सकते हैं — उदाहरण के लिए, आगे जाने पर बाईं ओर और पीछे जाने पर दाईं ओर स्लाइड — इसके लिए गार्ड में रूट की गहराई की तुलना कीजिए।

स्लाइड का प्रवेश और निकास

स्लाइड में अपारदर्शिता और ट्रांसफ़ॉर्म दोनों शामिल होते हैं। प्रवेश करते पृष्ठ को दाईं ओर से अंदर और निकलते पृष्ठ को बाईं ओर बाहर ले जाइए।

<style>
.slide-enter-active,
.slide-leave-active {
  transition: all 0.3s ease;
}
.slide-enter-from { transform: translateX(30px); opacity: 0; }
.slide-leave-to { transform: translateX(-30px); opacity: 0; }
</style>

पैरामीटर बदलने पर कुंजी देना

यदि दो रूट एक ही घटक साझा करते हैं, जैसे /user/1 और /user/2, तो Vue उसका पुनः उपयोग करता है और ट्रांज़िशन छोड़ देता है। दोबारा रेंडर और ऐनिमेशन लागू कराने के लिए रूट पथ पर :key जोड़िए।

<component :is="Component" :key="route.path" />

कम गति की पसंद का सम्मान करना

सुलभता के लिए, CSS मीडिया क्वेरी का उपयोग करके तब ऐनिमेशन बंद कर दीजिए जब उपयोगकर्ता कम गति को प्राथमिकता देता हो।

<style>
@media (prefers-reduced-motion: reduce) {
  .fade-enter-active, .fade-leave-active { transition: none; }
}
</style>

त्वरित जाँच

रूट ट्रांज़िशन के अपने ज्ञान की जाँचिए।

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

पुनरावलोकन

आपने रूटों में ऐनिमेशन करना सीखा:

Component और route प्राप्त करने के लिए v-slot के साथ RouterView का उपयोग कीजिए।
component :is को Transition में लपेटिए और mode="out-in" का उपयोग कीजिए।
ट्रांज़िशन नाम के आधार पर प्रवेश और निकास CSS परिभाषित कीजिए।
प्रति-रूट ऐनिमेशन के लिए route.meta.transition पढ़िए; साझा घटकों के लिए :key जोड़िए।

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

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

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

पाठ्यक्रम: 42
पाठ: 156

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

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

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

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

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

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

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

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

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

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

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

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

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

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