स्थानीयकृत पठन मार्गदर्शिका
vercel-react-view-transitionsउद्देश्य, उपयोग और स्रोत
React के View Transition API का उपयोग करके सहज, मूल-समान एनिमेशन लागू करने के लिए गाइड ( component, addTransitionType, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter/exit of components, animate list reorder, implement directional (forward/back) navigation animations, or integrate view transitions in Next.js. Also use when the user mentions view transitions, स्टार्ट व्यू ट्रांज़िशन, यह प्रश्न 'ViewTransition', ट्रांज़िशन प्रकारों के बारे में पूछता है, या बिना किसी थर्ड-पार्टी एनीमेशन लाइब्रेरी के React में UI स्टेट्स के बीच एनिमेशन करने के बारे में पूछता है।
स्रोत प्राप्त किया गया:
- स्रोत रिपॉज़िटरी
- vercel-labs/agent-skills
- SKILL.md
skills/react-view-transitions/SKILL.md- रिपॉज़िटरी Star
- 33,269
- रिपॉज़िटरी का अंतिम अपडेट
- 2026-10-29
- क्षमता वर्गीकरण
- विकास
- अंतिम संग्रह समय
लाइसेंस: निर्दिष्ट नहीं है
वर्कफ़्लो के अंश केवल पढ़ने में सहायता के लिए हैं, कोडेज़ से निष्पादन योग्य निर्देश नहीं हैं। इस पृष्ठ को बनाने के लिए किसी तृतीय-पक्ष स्किल का उपयोग नहीं किया गया है।
नीचे दिए गए उद्देश्य और कार्यप्रणाली संबंधी अंश प्रारंभिक सामग्री हैं, जिन्हें पढ़ने के लिए व्यवस्थित और अनुवादित किया गया है। ये अलग से लेबल किए गए कोडेज़ संपादकीय विश्लेषण से भिन्न हैं।
यह कौशल क्या करता है
React के View Transition API का उपयोग करके सहज, मूल-समान एनिमेशन लागू करने के लिए गाइड ( component, addTransitionType, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter/exit of components, animate list reorder, implement directional (forward/back) navigation animations, or integrate view transitions in Next.js. Also use when the user mentions view transitions, स्टार्ट व्यू ट्रांज़िशन, यह प्रश्न 'ViewTransition', ट्रांज़िशन प्रकारों के बारे में पूछता है, या बिना किसी थर्ड-पार्टी एनीमेशन लाइब्रेरी के React में UI स्टेट्स के बीच एनिमेशन करने के बारे में पूछता है।
अपस्ट्रीम वर्कफ़्लो कैसे काम करता है
कार्यान्वयन कार्यप्रवाह
किसी मौजूदा ऐप में व्यू ट्रांज़िशन जोड़ते समय, निम्नलिखित चरणों का पालन करें।references/implementation.mdचरण दर चरण। ऑडिट से शुरू करें—इसे छोड़ें नहीं।references/css-recipes.mdलागू होने योग्य सीएसएस का पता लगाएं और उसे ऐप के अनुसार अनुकूलित करें।
ऊपर की ओर मार्ग · L51 ↗एनिमेशन कब करें
प्रत्येक को स्थानिक संबंध या निरंतरता को संप्रेषित करना चाहिए। यदि आप यह स्पष्ट नहीं कर सकते कि यह क्या संप्रेषित करता है, तो इसे न जोड़ें। इस सूची से सभी लागू पैटर्न को इस क्रम में लागू करें: यह एक कार्यान्वयन क्रम है, न कि "एक चुनें" सूची। ऐप के लिए उपयुक्त प्रत्येक पैटर्न को लागू करें। किसी पैटर्न को तभी छोड़ें जब ऐप में उसका कोई उपयोग न हो।
रिएक्ट व्यू ट्रांज़िशन
ब्राउज़र की मूल कार्यप्रणाली का उपयोग करके यूआई स्थितियों के बीच एनिमेशन करेंdocument.startViewTransition के साथ *क्या* घोषित करें, trigger *when* with संक्रमण प्रारंभ करें / useDeferredValue / सस्पेंस बनाए रखने के लिए CSS क्लास का इस्तेमाल करें और एनिमेशन को नियंत्रित करें। असमर्थित ब्राउज़र एनिमेशन को सहजता से छोड़ देते हैं।
import { ViewTransition } from 'react';
<ViewTransition>
<Component />
</ViewTransition>आवश्यकताएँ और सेटअप
इस फ़ाइल से कोई संक्षिप्त आवश्यकताएँ नहीं चुनी गईं। इसका मतलब यह नहीं है कि स्किल की कोई निर्भरता नहीं है। रिपॉजिटरी सेटअप निर्देशों और संदर्भित फ़ाइलों की जाँच करें।
सीमाएं और गुणवत्ता जांच
नेस्टेड वीटी सीमा
जब एक अभिभावक वीटीmounts/unmountsएक इकाई के रूप में जिसमें कई VT समाहित हैं, उनमें से एक VT स्वयं सक्रिय नहीं होता है।enter/exit— केवल सबसे बाहरी VT ही सक्रिय होता है। (एक *स्थायी* जनक VT के अंदर स्थित एक शिशु VT सक्रिय होता है)enter/exitसामान्यतः।) पृष्ठ नेविगेशन के दौरान प्रति-आइटम चरणबद्ध एनिमेशन वर्तमान में उपलब्ध नहीं हैं।Next.jsअपस्ट्रीम प्रायोगिक स्थिति के लिए समस्या निवारण देखें।
ऊपर की ओर मार्ग · L304 ↗सुरक्षित परीक्षण से शुरुआत करें
- समर्थित होस्ट और रिपॉजिटरी इंस्टॉलेशन निर्देशों की जाँच करें। स्किल डायरेक्टरी और उससे संबंधित स्क्रिप्ट, एसेट्स और डॉक्यूमेंटेशन को एक साथ रखें;SKILL.mdअकेले होने पर निर्भरताओं को छोड़ा जा सकता है।
- एजेंट को अपना वास्तविक इनपुट, अपेक्षित आउटपुट और स्वीकृति मानदंड प्रदान करें। इनवोकेशन सिंटैक्स और उपलब्ध उपकरण होस्ट पर निर्भर करते हैं; यह साइट किसी सार्वभौमिक इंस्टॉलेशन कमांड को नहीं मानती है।
- डिस्पोजेबल प्रोजेक्ट या उसकी कॉपी पर मूल वर्कफ़्लो को आज़माएँ। फ़ाइलों, रिमोट सेवाओं या बिल योग्य संसाधनों में परिवर्तन करने वाले कार्यों की अनुमति देने से पहले उनकी समीक्षा करें।
- स्रोत गुणवत्ता जांच और अपनी आवश्यकताओं के आधार पर आउटपुट को सत्यापित करें। सफल ट्रिगर या उच्च रिपॉजिटरी स्टार संख्या सही परिणाम की गारंटी नहीं देते।
मूल लेख में आगे पढ़ें
- रिएक्ट व्यू ट्रांज़िशन
- एनिमेशन कब करें
- एनीमेशन शैली का चयन करना
- उपलब्धता
- कार्यान्वयन कार्यप्रवाह
- घटक
- एनीमेशन ट्रिगर्स
- महत्वपूर्ण प्लेसमेंट नियम
- रंगमंच की सामग्री
- सीएसएस छद्म-तत्व
- संक्रमण प्रकार
router.back()और ब्राउज़र बैक बटन- प्रकार और रहस्य
- साझा तत्व तत्परता
- साझा तत्व संक्रमण
- सूची का क्रम बदलें
- लेआउट विस्थापन मॉर्फ
- सूची पहचान के साथ साझा तत्वों की रचना करना
- फोर्स री-एंटर के साथ
key - सस्पेंस के लिए सामग्री पर वापस जाएँ
- एकाधिक वर्चुअल इंटरेक्शन कैसे परस्पर क्रिया करते हैं
- उपयोग
default="none"जान-बूझकर - दो पैटर्न सह-अस्तित्व में हैं
- नेस्टेड वीटी सीमा
- Next.jsएकीकरण
- सरल उपयोग
- संदर्भ फ़ाइलें
- पूर्ण संकलित दस्तावेज़
सम्बंधित योग्यता
अनुवाद और दायरा
यह पठन मार्गदर्शिका ऊपर पिन किए गए अंशों में से चयनित अंशों को प्रस्तुत करती है।SKILL.mdयह अनुवाद सहायता से किया गया है। यह कोई संपूर्ण नियमावली या परीक्षित संगतता का दावा नहीं है। उपयोग करने से पहले मूल दस्तावेज़ और उससे संबंधित फ़ाइलों को पढ़ें।
यह परिचय नीचे पिन किए गए संस्करण को संदर्भित करता है; वर्तमान रिपॉजिटरी गतिविधि और संग्रह समय अलग से दिखाए गए हैं।
- पिन किया गया स्रोत
- मूल लेख पढ़ें ↗
- स्रोत प्राप्त किया गया
- स्रोत कमिट
1a2c79d4e6c4a2283dc2c614b6538cbe1ed5ca62- स्रोत SHA-256
693acbddd1d2dcf774286867efbc9a5c09dce2da6f21f8e12618187a92f2106a