View Transitions API

व्यू ट्रांज़िशन एपीआई (क्रोम 111+) पेज की अलग-अलग स्थितियों के बीच या पेज पर जाने के बीच सहज, एनीमेशनयुक्त बदलाव संभव बनाता है। यह पहले और बाद के स्क्रीन-चित्र लेता है और CSS एनीमेशन की मदद से उनके बीच क्रमिक रूपांतरण करता है — जिससे वेब पर ऐप-जैसे बदलाव संभव होते हैं।

DOM में किए गए बदलाव को document.startViewTransition(() => updateDom()) के अंदर रखकर उसी पेज का ट्रांज़िशन शुरू करें। ब्राउज़र पुरानी स्थिति को दर्ज करता है, बदलाव चलाता है, नई स्थिति को दर्ज करता है और फिर दोनों के बीच अपने-आप क्रॉसफ़ेड करता है।

किसी CSS के बिना, व्यू ट्रांज़िशन पेज की पुरानी और नई स्थितियों के बीच एक सरल क्रॉसफ़ेड करता है। JavaScript की यह एक पंक्ति ऐसा सुघड़ बदलाव जोड़ती है, जिसके लिए पहले जटिल CSS एनीमेशन समन्वय या किसी विशेष एनीमेशन लाइब्रेरी की आवश्यकता होती थी।

यह एपीआई चार छद्म-तत्व उपलब्ध कराता है: ::view-transition (मूल ओवरले), ::view-transition-old(root) (पुराने पेज का स्क्रीन-चित्र), ::view-transition-new(root) (नए पेज का स्क्रीन-चित्र) और ::view-transition-image-pair(root)। इन्हें CSS एनीमेशन से अनुकूलित करें।

किसी ऐसे तत्व को view-transition-name: hero-image दें जो ट्रांज़िशन के दौरान बना रहता है। एपीआई इस तत्व को उसके पुराने स्थान और आकार से नए स्थान और आकार में रूपांतरित करता है — जिससे तत्व-स्तरीय सहज एनीमेशन अपने-आप बन जाता है।

छद्म-तत्वों पर कस्टम कीफ़्रेम लगाकर डिफ़ॉल्ट क्रॉसफ़ेड को बदलें: आगे जाने पर दाईं ओर से स्लाइड करके आएँ और पीछे जाने पर बाईं ओर से। ::view-transition-new(root) और ::view-transition-old(root) को @keyframes से लक्षित करें।

क्रॉस-दस्तावेज़ व्यू ट्रांज़िशन (क्रोम 126+) बहु-पृष्ठ ऐप्स में पूरे पेज पर जाने के बीच एनीमेशन चलाते हैं। CSS में @view-transition { navigation: auto; } जोड़ें — ब्राउज़र HTML पेजों के बीच बदलाव अपने-आप संभालता है, JavaScript की आवश्यकता नहीं होती।

वेस्टिब्युलर विकारों वाले उपयोगकर्ताओं को बहुत अधिक गति वाले ट्रांज़िशन का अनुभव नहीं होना चाहिए। ट्रांज़िशन एनीमेशन को @media (prefers-reduced-motion: no-preference) के अंदर रखें, ताकि कम गति पसंद करने वाले उपयोगकर्ताओं के लिए कस्टम एनीमेशन बंद हो जाएँ और कार्यात्मक DOM बदलाव बना रहे।

रिएक्ट राउटर v6.4+, व Vue राउटर और एस्ट्रो व्यू ट्रांज़िशन का समर्थन करते हैं। फ़्रेमवर्क मार्ग परिवर्तनों को अपने-आप startViewTransition के अंदर रखते हैं। नेविगेशन और लेआउट के मुख्य ढाँचे जैसे बने रहने वाले तत्वों पर view-transition-name के ज़रिए प्रत्येक मार्ग की ट्रांज़िशन शैलियाँ कॉन्फ़िगर करें।

व्यू ट्रांज़िशन पेज के स्क्रीन-चित्र लेते हैं, जो जटिल विन्यासों के लिए महँगा हो सकता है। अनेक संयुक्त परतों वाले बड़े पेजों में स्क्रीन-चित्र लेते समय रुकावट दिखाई दे सकती है। ट्रांज़िशन की अवधि 300 मिलीसेकंड से कम रखें और अत्यधिक जटिल उपवृक्षों में ट्रांज़िशन करने से बचें।

उपयोग करने से पहले एपीआई की उपलब्धता जाँचें: if (!document.startViewTransition) { updateDom(); return; }। वैकल्पिक व्यवस्था DOM को बिना एनीमेशन के सामान्य रूप से अपडेट करती है। व्यू ट्रांज़िशन क्रमिक सुधार हैं — उनके बिना भी ऐप काम करता है; जहाँ समर्थन उपलब्ध हो, वहाँ वे अनुभव को बेहतर बना देते हैं।

व्यू ट्रांज़िशन एपीआई कम कोड में DOM स्थितियों या पेज पर जाने के बीच क्रॉसफ़ेड और रूपांतरण एनीमेशन संभव बनाता है। नामित ट्रांज़िशन तत्व अपने-आप रूपांतरित होते हैं; कस्टम छद्म-तत्व एनीमेशन डिफ़ॉल्ट क्रॉसफ़ेड की जगह ले लेते हैं। prefers-reduced-motion का सम्मान करें और ऐसे ब्राउज़रों के लिए क्रमिक सुधार का उपयोग करें जिनमें समर्थन उपलब्ध नहीं है।