CSS व्यू ट्रांज़िशन API: स्मूथ पेज नेविगेशन लागू करने के लिए अंतिम गाइड

दशकों से, वेब नेविगेशन को एक कठोर वास्तविकता द्वारा परिभाषित किया गया है: खाली सफेद स्क्रीन। एक लिंक पर क्लिक करने का मतलब था एक पूरा पेज फिर से लोड होना, कुछ पल के लिए खालीपन की एक झलक, और फिर अचानक नई सामग्री का दिखना। हालांकि यह कार्यात्मक था, इस अनुभव में वह तरलता और परिष्कार नहीं था जिसकी उपयोगकर्ता नेटिव एप्लिकेशन से उम्मीद करते हैं। सिंगल-पेज एप्लिकेशन (SPAs) एक समाधान के रूप में उभरे, जो सहज ट्रांज़िशन बनाने के लिए जटिल जावास्क्रिप्ट फ्रेमवर्क का उपयोग करते हैं, लेकिन अक्सर वास्तुशिल्प सादगी और शुरुआती लोड प्रदर्शन की कीमत पर।

क्या होगा अगर हम दोनों दुनियाओं का सर्वश्रेष्ठ प्राप्त कर सकें? एक मल्टी-पेज एप्लिकेशन (MPA) की सरल, सर्वर-रेंडर की गई वास्तुकला को एक SPA के सुरुचिपूर्ण, सार्थक ट्रांज़िशन के साथ जोड़ा जाए। यही CSS व्यू ट्रांज़िशन API का वादा है, जो एक अभूतपूर्व ब्राउज़र सुविधा है जो वेब पर उपयोगकर्ता अनुभवों के बारे में हमारे सोचने और बनाने के तरीके में क्रांति लाने के लिए तैयार है।

यह व्यापक गाइड आपको व्यू ट्रांज़िशन API की गहराई में ले जाएगा। हम यह पता लगाएंगे कि यह क्या है, यह वेब विकास के लिए एक स्मारकीय बदलाव क्यों है, और आप इसे आज कैसे लागू कर सकते हैं - दोनों SPAs के लिए और, अधिक रोमांचक रूप से, पारंपरिक MPAs के लिए। सफेद फ्लैश को अलविदा कहने और सहज वेब नेविगेशन के एक नए युग का स्वागत करने के लिए तैयार हो जाइए।

CSS व्यू ट्रांज़िशन API क्या है?

CSS व्यू ट्रांज़िशन API वेब प्लेटफ़ॉर्म में सीधे बनाया गया एक तंत्र है जो डेवलपर्स को विभिन्न DOM (डॉक्यूमेंट ऑब्जेक्ट मॉडल) अवस्थाओं के बीच एनिमेटेड ट्रांज़िशन बनाने की अनुमति देता है। इसके मूल में, यह एक दृश्य से दूसरे दृश्य में दृश्य परिवर्तन को प्रबंधित करने का एक सरल तरीका प्रदान करता है, चाहे वह परिवर्तन एक ही पृष्ठ पर हो (एक SPA में) या दो अलग-अलग दस्तावेज़ों के बीच (एक MPA में)।

यह प्रक्रिया उल्लेखनीय रूप से चतुर है। जब एक ट्रांज़िशन शुरू होता है, तो ब्राउज़र:

1. वर्तमान पृष्ठ की स्थिति (पुराना दृश्य) का "स्क्रीनशॉट" लेता है।
2. आपको DOM को नई स्थिति में अपडेट करने की अनुमति देता है।
3. नए पृष्ठ की स्थिति (नया दृश्य) का "स्क्रीनशॉट" लेता है।
4. पुराने दृश्य के स्क्रीनशॉट को नए, लाइव दृश्य के ऊपर रखता है।
5. दोनों के बीच ट्रांज़िशन को एनिमेट करता है, आमतौर पर डिफ़ॉल्ट रूप से एक स्मूथ क्रॉस-फेड के साथ।

यह पूरी प्रक्रिया ब्राउज़र द्वारा संचालित होती है, जिससे यह अत्यधिक प्रदर्शनकारी हो जाती है। इससे भी महत्वपूर्ण बात यह है कि यह डेवलपर्स को मानक CSS का उपयोग करके एनिमेशन पर पूरा नियंत्रण देता है, जो कभी एक जटिल जावास्क्रिप्ट कार्य था उसे एक घोषणात्मक और सुलभ स्टाइलिंग चुनौती में बदल देता है।

यह वेब डेवलपमेंट के लिए गेम-चेंजर क्यों है

इस API का परिचय केवल एक और वृद्धिशील अपडेट नहीं है; यह वेब प्लेटफ़ॉर्म में एक मौलिक सुधार का प्रतिनिधित्व करता है। यहाँ बताया गया है कि यह दुनिया भर के डेवलपर्स और उपयोगकर्ताओं के लिए इतना महत्वपूर्ण क्यों है:

• नाटकीय रूप से बेहतर उपयोगकर्ता अनुभव (UX): स्मूथ ट्रांज़िशन केवल कॉस्मेटिक नहीं हैं। वे दृश्य निरंतरता प्रदान करते हैं, जिससे उपयोगकर्ताओं को विभिन्न दृश्यों के बीच संबंध समझने में मदद मिलती है। एक तत्व जो एक थंबनेल से एक पूर्ण-आकार की छवि में सहज रूप से बढ़ता है, संदर्भ प्रदान करता है और उपयोगकर्ता का ध्यान निर्देशित करता है, जिससे इंटरफ़ेस अधिक सहज और उत्तरदायी महसूस होता है।
• अत्यधिक सरलीकृत विकास: इस API से पहले, समान प्रभाव प्राप्त करने के लिए भारी जावास्क्रिप्ट लाइब्रेरी (जैसे फ्रेमर मोशन या GSAP) या जटिल CSS-in-JS समाधानों की आवश्यकता होती थी। व्यू ट्रांज़िशन API इस जटिलता को एक साधारण फ़ंक्शन कॉल और कुछ पंक्तियों के CSS से बदल देता है, जिससे सुंदर, ऐप-जैसे अनुभव बनाने के लिए प्रवेश की बाधा कम हो जाती है।
• बेहतर प्रदर्शन: एनिमेशन लॉजिक को ब्राउज़र के रेंडरिंग इंजन पर ऑफ़लोड करके, व्यू ट्रांज़िशन उनके जावास्क्रिप्ट-संचालित समकक्षों की तुलना में अधिक प्रदर्शनकारी और बैटरी-कुशल हो सकते हैं। ब्राउज़र इस प्रक्रिया को उन तरीकों से अनुकूलित कर सकता है जिन्हें मैन्युअल रूप से दोहराना मुश्किल है।
• SPA-MPA विभाजन को पाटना: शायद सबसे रोमांचक पहलू क्रॉस-डॉक्यूमेंट ट्रांज़िशन के लिए इसका समर्थन है। यह पारंपरिक, सर्वर-रेंडर की गई वेबसाइटों (MPAs) को उस तरल नेविगेशन को अपनाने की अनुमति देता है जिसे लंबे समय से SPAs के लिए विशेष माना जाता था। व्यवसाय अब एक पूर्ण SPA फ्रेमवर्क में एक महंगी और जटिल वास्तुशिल्प माइग्रेशन किए बिना अपनी मौजूदा वेबसाइटों को आधुनिक UX पैटर्न के साथ बढ़ा सकते हैं।

मुख्य अवधारणाएँ: व्यू ट्रांज़िशन के पीछे के जादू को समझना

API में महारत हासिल करने के लिए, आपको पहले इसके दो मुख्य घटकों को समझना होगा: जावास्क्रिप्ट ट्रिगर और CSS स्यूडो-एलिमेंट ट्री जो अनुकूलन को सक्षम बनाता है।

जावास्क्रिप्ट एंट्री प्वाइंट: `document.startViewTransition()`

सब कुछ एक ही जावास्क्रिप्ट फ़ंक्शन से शुरू होता है: `document.startViewTransition()`। यह फ़ंक्शन एक कॉलबैक को तर्क के रूप में लेता है। इस कॉलबैक के अंदर, आप पुरानी स्थिति से नई स्थिति में जाने के लिए आवश्यक सभी DOM जोड़तोड़ करते हैं।

एक सामान्य कॉल इस तरह दिखता है:

// सबसे पहले, जांचें कि ब्राउज़र API का समर्थन करता है या नहीं
if (!document.startViewTransition) {
  // यदि समर्थित नहीं है, तो सीधे DOM को अपडेट करें
  updateTheDOM();
} else {
  // यदि समर्थित है, तो DOM अपडेट को ट्रांज़िशन फ़ंक्शन में लपेटें
  document.startViewTransition(() => {
    updateTheDOM();
  });
}

जब आप `startViewTransition` को कॉल करते हैं, तो ब्राउज़र पहले वर्णित कैप्चर-अपडेट-एनिमेट अनुक्रम शुरू करता है। फ़ंक्शन एक `ViewTransition` ऑब्जेक्ट लौटाता है, जिसमें वादे होते हैं जो आपको अधिक उन्नत नियंत्रण के लिए ट्रांज़िशन जीवनचक्र के विभिन्न चरणों में हुक करने की अनुमति देते हैं।

CSS स्यूडो-एलिमेंट ट्री

अनुकूलन की वास्तविक शक्ति CSS स्यूडो-एलिमेंट्स के एक विशेष सेट में निहित है जिसे ब्राउज़र एक ट्रांज़िशन के दौरान बनाता है। यह अस्थायी ट्री आपको पुराने और नए दृश्यों को स्वतंत्र रूप से स्टाइल करने देता है।

• ::view-transition: ट्री का रूट, पूरे व्यूपोर्ट को कवर करता है। आप इसका उपयोग ट्रांज़िशन के लिए पृष्ठभूमि रंग या अवधि निर्धारित करने के लिए कर सकते हैं।
• ::view-transition-group(name): एक एकल ट्रांज़िशनिंग तत्व का प्रतिनिधित्व करता है। यह एनिमेशन के दौरान तत्व की स्थिति और आकार के लिए ज़िम्मेदार है।
• ::view-transition-image-pair(name): किसी तत्व के पुराने और नए दृश्यों के लिए एक कंटेनर। इसे एक अलग `mix-blend-mode` के रूप में स्टाइल किया गया है।
• ::view-transition-old(name): अपनी पुरानी स्थिति में तत्व का स्क्रीनशॉट (जैसे, थंबनेल)।
• ::view-transition-new(name): अपनी नई स्थिति में तत्व का लाइव प्रतिनिधित्व (जैसे, पूर्ण-आकार की छवि)।

डिफ़ॉल्ट रूप से, इस ट्री में एकमात्र तत्व `root` है, जो पूरे पृष्ठ का प्रतिनिधित्व करता है। अवस्थाओं के बीच विशिष्ट तत्वों को एनिमेट करने के लिए, आपको उन्हें एक सुसंगत `view-transition-name` देना होगा।

व्यावहारिक कार्यान्वयन: आपका पहला व्यू ट्रांज़िशन (SPA उदाहरण)

आइए एक सामान्य UI पैटर्न बनाते हैं: कार्ड की एक सूची जो क्लिक करने पर, उसी पृष्ठ पर एक विस्तृत दृश्य में परिवर्तित हो जाती है। कुंजी एक साझा तत्व, जैसे एक छवि, का होना है, जो दो अवस्थाओं के बीच सुचारू रूप से बदल जाती है।

चरण 1: HTML संरचना

हमें अपनी सूची के लिए एक कंटेनर और विस्तृत दृश्य के लिए एक कंटेनर की आवश्यकता है। हम एक को दिखाने और दूसरे को छिपाने के लिए एक मूल तत्व पर एक क्लास को टॉगल करेंगे।

<div id="app-container">
  <div class="list-view">
    <!-- कार्ड 1 -->
    <div class="card" data-id="item-1">
      <img src="thumbnail-1.jpg" alt="आइटम 1">
      <h3>उत्पाद एक</h3>
    </div>
    <!-- और कार्ड... -->
  </div>   <div class="detail-view" hidden>
    <img src="large-1.jpg" alt="आइटम 1">
    <h1>उत्पाद एक</h1>
    <p>विस्तृत विवरण यहाँ...</p>
    <button id="back-button">वापस</button>
  </div>
</div>

चरण 2: एक `view-transition-name` असाइन करें

ब्राउज़र को यह समझाने के लिए कि थंबनेल छवि और विस्तृत दृश्य छवि *एक ही वैचारिक तत्व* हैं, हमें उन्हें हमारे CSS में एक ही `view-transition-name` देना होगा। यह नाम किसी भी समय पृष्ठ पर प्रत्येक ट्रांज़िशनिंग तत्व के लिए अद्वितीय होना चाहिए।

.card.active img {
  view-transition-name: product-image;
} .detail-view.active img {
  view-transition-name: product-image;
}

हम एक `.active` क्लास का उपयोग करते हैं, जिसे हम जावास्क्रिप्ट के साथ जोड़ेंगे, यह सुनिश्चित करने के लिए कि केवल दृश्यमान तत्वों को ही नाम दिया गया है, ताकि टकराव से बचा जा सके।

चरण 3: जावास्क्रिप्ट लॉजिक

अब, हम वह फ़ंक्शन लिखेंगे जो DOM अपडेट को संभालता है और इसे `document.startViewTransition()` में लपेटता है।

function showDetailView(itemId) {
  const updateDOM = () => {
    // सही कार्ड और विस्तृत दृश्य में 'active' क्लास जोड़ें
    // यह CSS के माध्यम से view-transition-name भी असाइन करता है
    document.querySelector(`.card[data-id='${itemId}']`).classList.add('active');
    document.querySelector('.detail-view').classList.add('active');     // सूची छिपाएं और विस्तृत दृश्य दिखाएं
    document.querySelector('.list-view').hidden = true;
    document.querySelector('.detail-view').hidden = false;
  };   if (!document.startViewTransition) {
    updateDOM();
    return;
  }   document.startViewTransition(() => updateDOM());
}

सिर्फ इसके साथ, एक कार्ड पर क्लिक करने से छवि के लिए एक स्मूथ, मॉर्फिंग एनिमेशन और बाकी पेज के लिए एक क्रॉस-फेड शुरू हो जाएगा। किसी जटिल एनिमेशन टाइमलाइन या लाइब्रेरी की आवश्यकता नहीं है।

अगला मोर्चा: MPAs के लिए क्रॉस-डॉक्यूमेंट व्यू ट्रांज़िशन

यह वह जगह है जहाँ API वास्तव में परिवर्तनकारी हो जाता है। इन स्मूथ ट्रांज़िशन को पारंपरिक मल्टी-पेज एप्लिकेशन (MPAs) पर लागू करना पहले उन्हें SPAs में बदले बिना असंभव था। अब, यह एक साधारण ऑप्ट-इन है।

क्रॉस-डॉक्यूमेंट ट्रांज़िशन को सक्षम करना

विभिन्न पृष्ठों के बीच नेविगेशन के लिए ट्रांज़िशन को सक्षम करने के लिए, आप स्रोत और गंतव्य दोनों पृष्ठों के CSS में एक साधारण CSS at-rule जोड़ते हैं:

@view-transition {
  navigation: auto;
}

बस इतना ही। एक बार यह नियम मौजूद होने पर, ब्राउज़र स्वचालित रूप से सभी समान-मूल नेविगेशन के लिए एक व्यू ट्रांज़िशन (डिफ़ॉल्ट क्रॉस-फेड) का उपयोग करेगा।

कुंजी: एक सुसंगत `view-transition-name`

जैसे SPA उदाहरण में, दो अलग-अलग पृष्ठों पर तत्वों को जोड़ने का जादू एक साझा, अद्वितीय `view-transition-name` पर निर्भर करता है। आइए एक उत्पाद सूची पृष्ठ (`/products`) और एक उत्पाद विवरण पृष्ठ (`/products/item-1`) की कल्पना करें।

`products.html` पर:

<a href="/products/item-1">
  <img src="thumbnail-1.jpg" style="view-transition-name: product-image-1;">
</a>

`product-detail.html` पर:

<div class="hero">
  <img src="large-1.jpg" style="view-transition-name: product-image-1;">
</div>

जब कोई उपयोगकर्ता पहले पृष्ठ पर लिंक पर क्लिक करता है, तो ब्राउज़र `view-transition-name: product-image-1` वाले एक तत्व को पृष्ठ छोड़ते हुए देखता है। फिर यह नए पृष्ठ के लोड होने की प्रतीक्षा करता है। जब दूसरा पृष्ठ रेंडर होता है, तो उसे उसी `view-transition-name` वाला एक तत्व मिलता है और स्वचालित रूप से दोनों के बीच एक स्मूथ मॉर्फिंग एनिमेशन बनाता है। बाकी पृष्ठ सामग्री एक सूक्ष्म क्रॉस-फेड के लिए डिफ़ॉल्ट होती है। यह गति और निरंतरता की एक धारणा बनाता है जो पहले MPAs के लिए अकल्पनीय थी।

उन्नत तकनीकें और अनुकूलन

डिफ़ॉल्ट क्रॉस-फेड सुरुचिपूर्ण है, लेकिन API CSS एनिमेशन के माध्यम से गहरे अनुकूलन हुक प्रदान करता है।

CSS के साथ एनिमेशन को अनुकूलित करना

आप मानक CSS `@keyframes` और `animation` गुणों के साथ स्यूडो-एलिमेंट्स को लक्षित करके डिफ़ॉल्ट एनिमेशन को ओवरराइड कर सकते हैं।

उदाहरण के लिए, नए पृष्ठ सामग्री के लिए "दाईं ओर से स्लाइड-इन" प्रभाव बनाने के लिए:

@keyframes slide-from-right {
  from { transform: translateX(100%); }
} ::view-transition-new(root) {
  animation: slide-from-right 0.5s ease-out;
}

आप अत्यधिक कोरियोग्राफ और परिष्कृत ट्रांज़िशन बनाने के लिए विभिन्न तत्वों के लिए `::view-transition-old` और `::view-transition-new` पर अलग-अलग एनिमेशन लागू कर सकते हैं।

क्लासेस के साथ ट्रांज़िशन प्रकारों को नियंत्रित करना

एक सामान्य आवश्यकता आगे और पीछे नेविगेशन के लिए अलग-अलग एनिमेशन होना है। उदाहरण के लिए, एक फॉरवर्ड नेविगेशन नए पेज को दाईं ओर से स्लाइड कर सकता है, जबकि एक बैक नेविगेशन इसे बाईं ओर से स्लाइड कर सकता है। यह ट्रांज़िशन शुरू करने से ठीक पहले दस्तावेज़ तत्व (``) में एक क्लास जोड़कर प्राप्त किया जा सकता है।

'बैक' बटन के लिए जावास्क्रिप्ट:

backButton.addEventListener('click', (event) => {
  event.preventDefault();
  document.documentElement.classList.add('is-going-back');
  document.startViewTransition(() => {
    // वापस नेविगेट करने का लॉजिक
    Promise.resolve().then(() => {
      document.documentElement.classList.remove('is-going-back');
    });
  });
});

विभिन्न एनिमेशन को परिभाषित करने के लिए CSS:

/* डिफ़ॉल्ट फॉरवर्ड एनिमेशन */
::view-transition-new(root) {
  animation: slide-from-right 0.5s;
} /* बैक एनिमेशन */
.is-going-back::view-transition-new(root) {
  animation: slide-from-left 0.5s;
}

यह शक्तिशाली पैटर्न उपयोगकर्ता के नौवहन अनुभव पर दानेदार नियंत्रण प्रदान करता है।

अभिगम्यता संबंधी विचार

एक आधुनिक वेब API मजबूत अभिगम्यता के बिना अधूरा होगा, और व्यू ट्रांज़िशन API इसे पूरा करता है।

• उपयोगकर्ता की प्राथमिकताओं का सम्मान: API स्वचालित रूप से `prefers-reduced-motion` मीडिया क्वेरी का सम्मान करता है। यदि किसी उपयोगकर्ता ने संकेत दिया है कि वे अपने ऑपरेटिंग सिस्टम सेटिंग्स में कम गति पसंद करते हैं, तो ट्रांज़िशन छोड़ दिया जाता है, और DOM अपडेट तुरंत होता है। यह डेवलपर से बिना किसी अतिरिक्त काम के डिफ़ॉल्ट रूप से होता है।
• फोकस बनाए रखना: ट्रांज़िशन पूरी तरह से दृश्य हैं। वे मानक फोकस प्रबंधन में हस्तक्षेप नहीं करते हैं। यह सुनिश्चित करना डेवलपर की ज़िम्मेदारी बनी हुई है कि एक ट्रांज़िशन के बाद, कीबोर्ड फोकस को नए दृश्य में एक तार्किक तत्व में ले जाया जाए, जैसे कि मुख्य शीर्षक या पहला इंटरैक्टिव तत्व।
• सिमेंटिक HTML: API एक संवर्धन परत है। आपका अंतर्निहित HTML सिमेंटिक और सुलभ रहना चाहिए। एक स्क्रीन रीडर या एक गैर-समर्थक ब्राउज़र वाला उपयोगकर्ता ट्रांज़िशन के बिना सामग्री का अनुभव करेगा, इसलिए संरचना को अपने आप में समझ में आना चाहिए।

ब्राउज़र समर्थन और प्रगतिशील संवर्धन

2023 के अंत तक, SPAs के लिए व्यू ट्रांज़िशन API क्रोमियम-आधारित ब्राउज़रों (क्रोम, एज, ओपेरा) में समर्थित है। MPAs के लिए क्रॉस-डॉक्यूमेंट ट्रांज़िशन एक फीचर फ्लैग के पीछे उपलब्ध हैं और सक्रिय रूप से विकसित किए जा रहे हैं।

API को शुरू से ही प्रगतिशील संवर्धन के लिए डिज़ाइन किया गया था। हमने पहले जो गार्ड पैटर्न इस्तेमाल किया था, वह महत्वपूर्ण है:

if (!document.startViewTransition) { ... }

यह सरल जांच सुनिश्चित करती है कि आपका कोड केवल उन ब्राउज़रों में एक ट्रांज़िशन बनाने का प्रयास करता है जो इसका समर्थन करते हैं। पुराने ब्राउज़रों में, DOM अपडेट तुरंत होता है, जैसा कि हमेशा होता है। इसका मतलब है कि आप आज से ही आधुनिक ब्राउज़रों पर उपयोगकर्ताओं के अनुभव को बढ़ाने के लिए API का उपयोग करना शुरू कर सकते हैं, पुराने ब्राउज़र वालों पर शून्य नकारात्मक प्रभाव के साथ। यह एक जीत-जीत की स्थिति है।

वेब नेविगेशन का भविष्य

व्यू ट्रांज़िशन API केवल आकर्षक एनिमेशन के लिए एक उपकरण से कहीं बढ़कर है। यह एक मौलिक बदलाव है जो डेवलपर्स को अधिक सहज, सुसंगत और आकर्षक उपयोगकर्ता यात्राएँ तैयार करने का अधिकार देता है। पेज ट्रांज़िशन को मानकीकृत करके, वेब प्लेटफ़ॉर्म नेटिव एप्लिकेशन के साथ अंतर को कम कर रहा है, जिससे सभी प्रकार की वेबसाइटों के लिए गुणवत्ता और परिष्कार का एक नया स्तर सक्षम हो रहा है।

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

निष्कर्ष: आज ही स्मूथ अनुभव बनाना शुरू करें

CSS व्यू ट्रांज़िशन API शक्तिशाली क्षमताओं और उल्लेखनीय सादगी का एक दुर्लभ संयोजन प्रदान करता है। यह आपके साइट के उपयोगकर्ता अनुभव को कार्यात्मक से आनंदमय तक बढ़ाने का एक प्रदर्शनकारी, सुलभ और प्रगतिशील रूप से संवर्धित तरीका प्रदान करता है।

चाहे आप एक जटिल SPA या एक पारंपरिक सर्वर-रेंडर की गई वेबसाइट बना रहे हों, अब कठोर पेज लोड को खत्म करने और अपने उपयोगकर्ताओं को अपने इंटरफ़ेस के माध्यम से तरल, सार्थक एनिमेशन के साथ मार्गदर्शन करने के लिए उपकरण उपलब्ध हैं। इसकी शक्ति को समझने का सबसे अच्छा तरीका इसे आज़माना है। अपने एप्लिकेशन का एक छोटा सा हिस्सा लें - एक गैलरी, एक सेटिंग्स पेज, या एक उत्पाद प्रवाह - और प्रयोग करें। आप चकित रह जाएंगे कि कोड की कुछ पंक्तियाँ आपकी वेबसाइट की भावना को मौलिक रूप से कैसे बदल सकती हैं।

सफेद फ्लैश का युग समाप्त हो रहा है। वेब नेविगेशन का भविष्य सहज है, और व्यू ट्रांज़िशन API के साथ, आपके पास इसे आज से बनाना शुरू करने के लिए सब कुछ है।