एक पेज के ऐप्लिकेशन के लिए, एक ही दस्तावेज़ वाले व्यू में ट्रांज़िशन

Jake Archibald

Bramus

जब किसी एक दस्तावेज़ पर व्यू का ट्रांज़िशन चलता है, तो उसे एक ही दस्तावेज़ के व्यू में होने वाला ट्रांज़िशन कहा जाता है. आम तौर पर, एक पेज वाले ऐप्लिकेशन (एसपीए) में ऐसा होता है, जहां डीओएम को अपडेट करने के लिए JavaScript का इस्तेमाल किया जाता है. Chrome 111 में, एक ही दस्तावेज़ वाले व्यू ट्रांज़िशन की सुविधा Chrome में काम करती है.

समान दस्तावेज़ वाले व्यू का ट्रांज़िशन ट्रिगर करने के लिए, document.startViewTransition को कॉल करें:

function handleClick(e) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow();
    return;
  }

  // With a View Transition:
  document.startViewTransition(() => updateTheDOMSomehow());
}

शुरू होने पर, ब्राउज़र उन सभी एलिमेंट के स्नैपशॉट अपने-आप कैप्चर करता है जिनमें view-transition-name सीएसएस प्रॉपर्टी दी गई है.

इसके बाद, यह कॉलबैक में पास किए गए डेटा को एक्ज़ीक्यूट करता है, जो डीओएम को अपडेट करता है. इसके बाद, यह नई स्थिति के स्नैपशॉट लेता है.

इसके बाद, ये स्नैपशॉट, छद्म एलिमेंट के ट्री में व्यवस्थित किए जाते हैं और सीएसएस ऐनिमेशन का इस्तेमाल करके ऐनिमेशन के ज़रिए व्यवस्थित किए जाते हैं. पुरानी और नई स्थिति के स्नैपशॉट के जोड़े, आसानी से अपनी पुरानी पोज़िशन और साइज़ से नई जगह पर चले जाते हैं. हालांकि, उनका कॉन्टेंट क्रॉसफ़ेड हो जाता है. अगर आप चाहें, तो ऐनिमेशन को पसंद के मुताबिक बनाने के लिए सीएसएस का इस्तेमाल किया जा सकता है.

डिफ़ॉल्ट ट्रांज़िशन: क्रॉस-फ़ेड

डिफ़ॉल्ट व्यू ट्रांज़िशन क्रॉस-फ़ेड होता है, इसलिए यह एपीआई के बारे में बेहतर जानकारी देता है:

function spaNavigate(data) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow(data);
    return;
  }

  // With a transition:
  document.startViewTransition(() => updateTheDOMSomehow(data));
}

जहां updateTheDOMSomehow, DOM को नई स्थिति में बदलता है. यह आपके हिसाब से किया जा सकता है. उदाहरण के लिए, आपके पास एलिमेंट जोड़ने या हटाने, क्लास के नाम या स्टाइल बदलने का विकल्प होता है.

और इस तरह, पेज क्रॉस-फ़ेड हो जाते हैं:

ठीक है, क्रॉस-फ़ेड उतना शानदार नहीं है. अच्छी बात यह है कि ट्रांज़िशन को पसंद के मुताबिक बनाया जा सकता है, लेकिन इसके लिए पहले आपको यह समझना होगा कि यह बुनियादी क्रॉस-फ़ेड कैसे काम करता है.

ये ट्रांज़िशन कैसे काम करते हैं

आइए, पिछले कोड सैंपल को अपडेट करते हैं.

document.startViewTransition(() => updateTheDOMSomehow(data));

.startViewTransition() को कॉल करने पर, एपीआई, पेज की मौजूदा स्थिति को कैप्चर कर लेता है. इसमें, स्नैपशॉट लेना भी शामिल है.

प्रक्रिया पूरी होने के बाद, .startViewTransition() को पास किया गया कॉलबैक कॉल किया जाता है. यहां से DOM बदल जाता है. इसके बाद, एपीआई पेज की नई स्थिति को कैप्चर कर लेता है.

नया स्टेट कैप्चर होने के बाद, एपीआई इस तरह का स्यूडो-एलिमेंट ट्री बनाता है:

::view-transition
└─ ::view-transition-group(root)
   └─ ::view-transition-image-pair(root)
      ├─ ::view-transition-old(root)
      └─ ::view-transition-new(root)

::view-transition, पेज पर मौजूद बाकी सभी चीज़ों के ऊपर एक ओवरले में मौजूद है. यह तब काम आता है, जब ट्रांज़िशन के लिए बैकग्राउंड का रंग सेट करना हो.

::view-transition-old(root) पुराने व्यू का स्क्रीनशॉट है और ::view-transition-new(root) नए व्यू का लाइव वर्शन है. दोनों, सीएसएस के तौर पर 'बदले गए कॉन्टेंट' (जैसे, <img>) को रेंडर करते हैं.

पुराना व्यू opacity: 1 से opacity: 0 पर ऐनिमेट होता है, जबकि नया व्यू opacity: 0 से opacity: 1 में ऐनिमेट होता है. इससे क्रॉस-फ़ेड बन जाता है.

सभी ऐनिमेशन सीएसएस ऐनिमेशन का इस्तेमाल करके परफ़ॉर्म किए जाते हैं, ताकि उन्हें सीएसएस की मदद से अपनी पसंद के मुताबिक बनाया जा सके.

ट्रांज़िशन को पसंद के मुताबिक बनाएं

व्यू ट्रांज़िशन के सभी नकली एलिमेंट को सीएसएस की मदद से टारगेट किया जा सकता है. साथ ही, ऐनिमेशन को सीएसएस का इस्तेमाल करके तय किया जाता है, इसलिए मौजूदा सीएसएस ऐनिमेशन प्रॉपर्टी का इस्तेमाल करके उनमें बदलाव किया जा सकता है. उदाहरण के लिए:

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 5s;
}

इस एक बदलाव के साथ, अब फ़ेडरेशन बहुत धीमा हो गया है:

ठीक है, यह अब भी अच्छी बात नहीं है. इसके बजाय, नीचे दिया गया कोड Material Design के शेयर किए गए ऐक्सिस से ट्रांज़िशन को लागू करता है:

@keyframes fade-in {
  from { opacity: 0; }
}

@keyframes fade-out {
  to { opacity: 0; }
}

@keyframes slide-from-right {
  from { transform: translateX(30px); }
}

@keyframes slide-to-left {
  to { transform: translateX(-30px); }
}

::view-transition-old(root) {
  animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}

::view-transition-new(root) {
  animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}

और यह रहा नतीजा:

एक से ज़्यादा एलिमेंट का ट्रांज़िशन

पिछले डेमो में, शेयर किए गए ऐक्सिस के ट्रांज़िशन में पूरा पेज शामिल था. यह पेज के ज़्यादातर हिस्से के लिए काम करता है, लेकिन शीर्षक के लिए सही नहीं लगता. ऐसा इसलिए होता है, क्योंकि पेज को फिर से स्लाइड करने के लिए स्लाइड आउट हो जाता है.

इससे बचने के लिए, पेज के बाकी हिस्से से हेडर को एक्सट्रैक्ट करें, ताकि उसे अलग से ऐनिमेट किया जा सके. ऐसा करने के लिए, एलिमेंट को view-transition-name असाइन किया जाता है.

.main-header {
  view-transition-name: main-header;
}

view-transition-name की वैल्यू, आपकी पसंद के मुताबिक हो सकती है. हालांकि, none को छोड़कर, इसका मतलब है कि ट्रांज़िशन का कोई नाम नहीं है. इसका इस्तेमाल ट्रांज़िशन के दौरान एलिमेंट की खास तरीके से पहचान करने के लिए किया जाता है.

इसका नतीजा यह होता है:

अब हेडर अपनी जगह पर बना रहता है और क्रॉस-फ़ेड हो जाता है.

उस सीएसएस एलान की वजह से, स्यूडो-एलिमेंट ट्री बदल गया:

::view-transition
├─ ::view-transition-group(root)
│  └─ ::view-transition-image-pair(root)
│     ├─ ::view-transition-old(root)
│     └─ ::view-transition-new(root)
└─ ::view-transition-group(main-header)
   └─ ::view-transition-image-pair(main-header)
      ├─ ::view-transition-old(main-header)
      └─ ::view-transition-new(main-header)

अब दो ट्रांज़िशन ग्रुप हैं. एक हेडर के लिए और दूसरा बाकी के लिए. इन्हें सीएसएस की मदद से, अलग-अलग टारगेट किया जा सकता है और अलग-अलग ट्रांज़िशन दिए जा सकते हैं. हालांकि, इस मामले में main-header को डिफ़ॉल्ट ट्रांज़िशन के साथ छोड़ दिया गया था, जो कि क्रॉस-फ़ेड है.

ठीक है, डिफ़ॉल्ट ट्रांज़िशन के साथ-साथ क्रॉस फ़ेड ही नहीं, बल्कि ::view-transition-group भी ट्रांज़िशन होता है:

• transform का इस्तेमाल करके, पोज़िशन सेट करें और पूरी तरह बदलें
• चौड़ाई
• ऊंचाई

अब तक इसका कोई असर नहीं पड़ा है, क्योंकि हेडर का साइज़ और उसकी जगह, डीओएम बदलाव के दोनों तरफ़ की है. हालांकि, हेडर में मौजूद टेक्स्ट भी निकाला जा सकता है:

.main-header-text {
  view-transition-name: main-header-text;
  width: fit-content;
}

fit-content का इस्तेमाल किया जाता है, ताकि एलिमेंट बाकी चौड़ाई तक फैलाने के बजाय, टेक्स्ट का साइज़ हो. ऐसा न करने पर, बैक ऐरो दोनों पेजों में एक जैसा साइज़ होने के बजाय, हेडर टेक्स्ट एलिमेंट का साइज़ कम कर देता है.

इसलिए, अब हमारे पास तीन हिस्से हैं:

::view-transition
├─ ::view-transition-group(root)
│  └─ …
├─ ::view-transition-group(main-header)
│  └─ …
└─ ::view-transition-group(main-header-text)
   └─ …

लेकिन फिर से, डिफ़ॉल्ट के साथ आगे बढ़ें:

अब हेडिंग टेक्स्ट की मदद से स्क्रीन पर पीछे वाले बटन के लिए जगह बनाई जा सकती है.

कई स्यूडो-एलिमेंट को view-transition-class के साथ एक ही तरह से ऐनिमेट करें

मान लें कि आपके पास कई कार्ड के साथ व्यू ट्रांज़िशन है, लेकिन पेज पर एक टाइटल भी है. टाइटल को छोड़कर सभी कार्ड को ऐनिमेट करने के लिए, आपको ऐसा सिलेक्टर लिखना होगा जो हर कार्ड को टारगेट करता हो.

h1 {
    view-transition-name: title;
}
::view-transition-group(title) {
    animation-timing-function: ease-in-out;
}

#card1 { view-transition-name: card1; }
#card2 { view-transition-name: card2; }
#card3 { view-transition-name: card3; }
#card4 { view-transition-name: card4; }
…
#card20 { view-transition-name: card20; }

::view-transition-group(card1),
::view-transition-group(card2),
::view-transition-group(card3),
::view-transition-group(card4),
…
::view-transition-group(card20) {
    animation-timing-function: var(--bounce);
}

क्या आपके पास 20 एलिमेंट हैं? आपको ये 20 सिलेक्टर लिखने होंगे. क्या आपको कोई नया एलिमेंट जोड़ना है? इसके बाद, आपको ऐनिमेशन स्टाइल लागू करने वाले सिलेक्टर को भी बड़ा करना होगा. इसे पूरी तरह बढ़ाया नहीं जा सकता.

स्टाइल का नियम लागू करने के लिए, view-transition-class का इस्तेमाल व्यू ट्रांज़िशन स्यूडो-एलिमेंट में किया जा सकता है.

#card1 { view-transition-name: card1; }
#card2 { view-transition-name: card2; }
#card3 { view-transition-name: card3; }
#card4 { view-transition-name: card4; }
#card5 { view-transition-name: card5; }
…
#card20 { view-transition-name: card20; }

#cards-wrapper > div {
  view-transition-class: card;
}
html::view-transition-group(.card) {
  animation-timing-function: var(--bounce);
}

नीचे दिए गए कार्ड का उदाहरण, पिछले सीएसएस स्निपेट का इस्तेमाल करता है. सभी कार्ड (इनमें नए जोड़े गए कार्ड भी शामिल हैं) में एक सिलेक्टर से, सभी कार्ड का समय एक जैसा हो जाता है: html::view-transition-group(.card).

ट्रांज़िशन को डीबग करना

व्यू ट्रांज़िशन, सीएसएस ऐनिमेशन के ऊपर बनाए जाते हैं. इसलिए, Chrome DevTools का ऐनिमेशन पैनल, ट्रांज़िशन को डीबग करने के लिए बहुत अच्छा है.

ऐनिमेशन पैनल का इस्तेमाल करके, अगले ऐनिमेशन को रोका जा सकता है और फिर ऐनिमेशन को आगे-पीछे किया जा सकता है. इस दौरान, एलिमेंट पैनल में ट्रांज़िशन स्यूडो एलिमेंट देखे जा सकते हैं.

ट्रांज़िशन वाले एलिमेंट को एक ही डीओएम एलिमेंट होना ज़रूरी नहीं है

अब तक हमने view-transition-name का इस्तेमाल करके हेडर और हेडर में टेक्स्ट के लिए, अलग-अलग ट्रांज़िशन एलिमेंट बनाए हैं. सैद्धांतिक रूप से, ये एलिमेंट डीओएम बदलने से पहले और बाद में एक जैसे ही होते हैं. हालांकि, जहां ऐसा नहीं होता है वहां ट्रांज़िशन बनाए जा सकते हैं.

उदाहरण के लिए, एम्बेड किए गए मुख्य वीडियो के लिए view-transition-name दिया जा सकता है:

.full-embed {
  view-transition-name: full-embed;
}

इसके बाद, थंबनेल पर क्लिक करने पर, ट्रांज़िशन के दौरान वही view-transition-name दिया जा सकता है:

thumbnail.onclick = async () => {
  thumbnail.style.viewTransitionName = 'full-embed';

  document.startViewTransition(() => {
    thumbnail.style.viewTransitionName = '';
    updateTheDOMSomehow();
  });
};

और नतीजा:

थंबनेल अब मुख्य इमेज में बदल जाएगा. भले ही, ये सैद्धांतिक तौर पर अलग-अलग एलिमेंट होते हैं, लेकिन ट्रांज़िशन एपीआई उन्हें एक ही चीज़ मानता है. इसकी वजह यह है कि दोनों के एलिमेंट में एक ही view-transition-name का इस्तेमाल होता है.

पिछले उदाहरण की तुलना में, इस ट्रांज़िशन का असली कोड थोड़ा ज़्यादा पेचीदा है. ऐसा इसलिए, क्योंकि यह थंबनेल पेज पर वापस जाने के ट्रांज़िशन को भी हैंडल करता है. पूरी तरह से लागू करने के बारे में जानने के लिए सोर्स देखें.

कस्टम एंट्री और एग्ज़िट ट्रांज़िशन

इस उदाहरण पर एक नज़र डालें:

साइडबार, इस ट्रांज़िशन का हिस्सा है:

.sidebar {
  view-transition-name: sidebar;
}

हालांकि, पिछले उदाहरण में हेडर के उलट, साइडबार सभी पेजों पर नहीं दिखता. अगर दोनों स्टेट में साइडबार है, तो ट्रांज़िशन स्यूडो एलिमेंट इस तरह दिखेंगे:

::view-transition
├─ …other transition groups…
└─ ::view-transition-group(sidebar)
   └─ ::view-transition-image-pair(sidebar)
      ├─ ::view-transition-old(sidebar)
      └─ ::view-transition-new(sidebar)

हालांकि, अगर साइडबार सिर्फ़ नए पेज पर है, तो ::view-transition-old(sidebar) स्यूडो-एलिमेंट वहां नहीं होगा. साइडबार के लिए कोई 'पुरानी' इमेज नहीं है, इसलिए इमेज के जोड़े में सिर्फ़ ::view-transition-new(sidebar) होगा. इसी तरह, अगर साइडबार सिर्फ़ पुराने पेज पर है, तो इमेज के जोड़े में सिर्फ़ ::view-transition-old(sidebar) होगा.

पिछले डेमो में, साइडबार का ट्रांज़िशन इस आधार पर होता है कि वह दोनों स्थितियों में प्रवेश कर रहा है, बाहर निकल रहा है या मौजूद है. यह दाईं ओर से फिसलकर और फ़ेड होकर अंदर आता है, दाईं ओर स्लाइड करके बाहर खिसकता है, और दोनों स्थितियों में मौजूद होने पर जगह में बना रहता है.

खास एंट्री और एग्ज़िट ट्रांज़िशन बनाने के लिए, इमेज के जोड़े में सिर्फ़ एक चाइल्ड होने पर, पुराने या नए नकली एलिमेंट को टारगेट करने के लिए :only-child pseudo-class का इस्तेमाल किया जा सकता है:

/* Entry transition */
::view-transition-new(sidebar):only-child {
  animation: 300ms cubic-bezier(0, 0, 0.2, 1) both fade-in,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}

/* Exit transition */
::view-transition-old(sidebar):only-child {
  animation: 150ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-right;
}

इस मामले में, दोनों स्थितियों में साइडबार के मौजूद होने पर कोई ट्रांज़िशन नहीं होता, क्योंकि डिफ़ॉल्ट तौर पर यह सबसे सही होता है.

एसिंक्रोनस डीओएम अपडेट और कॉन्टेंट मिलने का इंतज़ार है

.startViewTransition() को पास किया गया कॉलबैक, प्रॉमिस रिटर्न कर सकता है. इससे, एक साथ काम न करने वाले डीओएम अपडेट मिल सकते हैं और ज़रूरी कॉन्टेंट के तैयार होने का इंतज़ार किया जा सकता है.

document.startViewTransition(async () => {
  await something;
  await updateTheDOMSomehow();
  await somethingElse;
});

जब तक वादा पूरा नहीं हो जाता, तब तक ट्रांज़िशन शुरू नहीं होगा. इस दौरान, पेज फ़्रीज़ रहता है, इसलिए यहां देरी कम से कम होनी चाहिए. खास तौर पर, नेटवर्क को पाने की प्रोसेस .startViewTransition() को कॉल करने से पहले पूरी हो जानी चाहिए, जब तक कि पेज पूरी तरह से इंटरैक्टिव हो. इसे .startViewTransition() कॉलबैक के हिस्से के तौर पर न करें.

अगर आपको इमेज या फ़ॉन्ट के तैयार होने का इंतज़ार करना है, तो बहुत ज़्यादा टाइम आउट का इस्तेमाल करना न भूलें:

const wait = ms => new Promise(r => setTimeout(r, ms));

document.startViewTransition(async () => {
  updateTheDOMSomehow();

  // Pause for up to 100ms for fonts to be ready:
  await Promise.race([document.fonts.ready, wait(100)]);
});

हालांकि, कुछ मामलों में देरी से बचने और पहले से मौजूद कॉन्टेंट का ही इस्तेमाल करना बेहतर होता है.

अपने मौजूदा कॉन्टेंट का पूरा फ़ायदा लें

जब थंबनेल बड़ी इमेज में बदल जाता है, तो:

डिफ़ॉल्ट ट्रांज़िशन, क्रॉस-फ़ेड है. इसका मतलब है कि थंबनेल, पूरी तरह लोड न हुई इमेज के साथ क्रॉस-फ़ेड हो सकता है.

इसे मैनेज करने का एक तरीका यह है कि ट्रांज़िशन शुरू करने से पहले, पूरी इमेज के लोड होने का इंतज़ार करें. आम तौर पर, .startViewTransition() को कॉल करने से पहले ऐसा किया जाता है, ताकि पेज इंटरैक्टिव बना रहे. साथ ही, एक स्पिनर दिखाया जा सकता है, जिससे उपयोगकर्ता को पता चल सके कि चीज़ें लोड हो रही हैं. लेकिन इस मामले में, एक बेहतर तरीका है:

::view-transition-old(full-embed),
::view-transition-new(full-embed) {
  /* Prevent the default animation,
  so both views remain opacity:1 throughout the transition */
  animation: none;
  /* Use normal blending,
  so the new view sits on top and obscures the old view */
  mix-blend-mode: normal;
}

अब थंबनेल धुंधला नहीं होता, वह पूरी इमेज के नीचे दिखता है. इसका मतलब है कि अगर नया व्यू लोड नहीं हुआ है, तो ट्रांज़िशन के दौरान थंबनेल दिखेगा. इसका मतलब है कि ट्रांज़िशन तुरंत शुरू हो सकता है और पूरी इमेज अपने समय में लोड हो सकती है.

अगर नए व्यू में पारदर्शिता मौजूद है, तो यह काम नहीं करेगा, लेकिन इस मामले में हमें पता है कि उसमें पारदर्शिता नहीं है. इसलिए, हम यह ऑप्टिमाइज़ेशन कर सकते हैं.

आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) में हुए बदलावों को मैनेज करना

आसानी से, अब तक सभी ट्रांज़िशन, एक जैसे आसपेक्ट रेशियो वाले एलिमेंट पर किए गए हैं, लेकिन हमेशा ऐसा नहीं होता. क्या होगा अगर थंबनेल का साइज़ 1:1 है और मुख्य इमेज 16:9 है?

डिफ़ॉल्ट ट्रांज़िशन में, ग्रुप पहले वाले साइज़ से बाद के साइज़ में ऐनिमेट होता है. पुराने और नए व्यू, ग्रुप की 100% चौड़ाई और अपने-आप ऊंचाई वाले हैं. इसका मतलब है कि ग्रुप के साइज़ पर ध्यान दिए बिना ये दोनों आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) बनाए रखते हैं.

यह एक अच्छा डिफ़ॉल्ट तरीका है, लेकिन इस मामले में यह नहीं चाहिए. इसलिए:

::view-transition-old(full-embed),
::view-transition-new(full-embed) {
  /* Prevent the default animation,
  so both views remain opacity:1 throughout the transition */
  animation: none;
  /* Use normal blending,
  so the new view sits on top and obscures the old view */
  mix-blend-mode: normal;
  /* Make the height the same as the group,
  meaning the view size might not match its aspect-ratio. */
  height: 100%;
  /* Clip any overflow of the view */
  overflow: clip;
}

/* The old view is the thumbnail */
::view-transition-old(full-embed) {
  /* Maintain the aspect ratio of the view,
  by shrinking it to fit within the bounds of the element */
  object-fit: contain;
}

/* The new view is the full image */
::view-transition-new(full-embed) {
  /* Maintain the aspect ratio of the view,
  by growing it to cover the bounds of the element */
  object-fit: cover;
}

इसका मतलब है कि एलिमेंट की चौड़ाई बढ़ने पर थंबनेल, एलिमेंट के बीच में ही रहता है. हालांकि, 1:1 से 16:9 में बदलने पर, पूरी इमेज 'क्रॉप न करें'.

ज़्यादा जानकारी के लिए, ट्रांज़िशन देखना: आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) में होने वाले बदलावों को मैनेज करना देखें

डिवाइस की अलग-अलग स्थितियों के लिए ट्रांज़िशन बदलने के लिए, मीडिया क्वेरी का इस्तेमाल करना

हो सकता है कि आप मोबाइल बनाम डेस्कटॉप पर अलग-अलग ट्रांज़िशन का इस्तेमाल करना चाहें. उदाहरण के लिए, यह उदाहरण जो मोबाइल पर साइड से पूरी स्लाइड दिखाता है, लेकिन डेस्कटॉप पर ज़्यादा आसान स्लाइड दिखाता है:

सामान्य मीडिया क्वेरी का इस्तेमाल करके ऐसा किया जा सकता है:

/* Transitions for mobile */
::view-transition-old(root) {
  animation: 300ms ease-out both full-slide-to-left;
}

::view-transition-new(root) {
  animation: 300ms ease-out both full-slide-from-right;
}

@media (min-width: 500px) {
  /* Overrides for larger displays.
  This is the shared axis transition from earlier in the article. */
  ::view-transition-old(root) {
    animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
      300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
  }

  ::view-transition-new(root) {
    animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
      300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
  }
}

हो सकता है आप यह भी बदलना चाहें कि मेल खाने वाली मीडिया क्वेरी के आधार पर आप कौन से एलिमेंट view-transition-name असाइन करते हैं.

'कम मोशन' की प्राथमिकता पर प्रतिक्रिया दें

उपयोगकर्ता यह बता सकते हैं कि वे अपने ऑपरेटिंग सिस्टम के ज़रिए, कम मोशन में वीडियो देखना पसंद करते हैं. साथ ही, यह भी बताया जा सकता है कि उनकी प्राथमिकता सीएसएस में उपलब्ध है.

आपके पास इन उपयोगकर्ताओं के लिए किसी भी ट्रांज़िशन को रोकने का विकल्प होता है:

@media (prefers-reduced-motion) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

हालांकि, 'कम मोशन' की प्राथमिकता का मतलब यह नहीं है कि उपयोगकर्ता कोई मोशन नहीं चाहता. पिछले स्निपेट के बजाय, कोई ज़्यादा बेहतर ऐनिमेशन चुना जा सकता है, लेकिन ऐसा ऐनिमेशन चुनें जो एलिमेंट और डेटा के फ़्लो के बीच अब भी संबंध दिखाता हो.

व्यू ट्रांज़िशन टाइप की मदद से, एक से ज़्यादा व्यू ट्रांज़िशन स्टाइल मैनेज करना

कभी-कभी एक खास व्यू से दूसरे व्यू में होने वाले ट्रांज़िशन के लिए, खास तौर पर तैयार किया गया ट्रांज़िशन होना चाहिए. उदाहरण के लिए, किसी क्रम में अगले या पिछले पेज पर जाते समय, आपके पास अपने कॉन्टेंट को अलग-अलग दिशा में स्लाइड करने का विकल्प होता है. यह इस बात पर निर्भर करता है कि आप क्रम से ऊपर वाले पेज पर जा रहे हैं या निचले पेज पर.

इसके लिए, व्यू ट्रांज़िशन टाइप का इस्तेमाल किया जा सकता है. इनकी मदद से, ऐक्टिव व्यू ट्रांज़िशन के लिए एक या उससे ज़्यादा टाइप असाइन किए जा सकते हैं. उदाहरण के लिए, पेज नंबर क्रम में बड़े पेज पर ट्रांज़िशन करते समय, forwards टाइप का इस्तेमाल करें. वहीं, निचले पेज पर जाते समय backwards टाइप का इस्तेमाल करें. ये टाइप सिर्फ़ ट्रांज़िशन कैप्चर या परफ़ॉर्म करते समय चालू रहते हैं. अलग-अलग ऐनिमेशन का इस्तेमाल करने के लिए, सीएसएस की मदद से हर टाइप को अपनी पसंद के मुताबिक बनाया जा सकता है.

एक ही दस्तावेज़ के व्यू के ट्रांज़िशन में टाइप का इस्तेमाल करने के लिए, types को startViewTransition तरीके में पास करें. इसकी अनुमति देने के लिए, document.startViewTransition एक ऑब्जेक्ट भी स्वीकार करता है: update एक कॉलबैक फ़ंक्शन है जो डीओएम को अपडेट करता है और types, टाइप वाला एक कलेक्शन है.

const direction = determineBackwardsOrForwards();

const t = document.startViewTransition({
  update: updateTheDOMSomehow,
  types: ['slide', direction],
});

इन टाइप के जवाब देने के लिए, :active-view-transition-type() सिलेक्टर का इस्तेमाल करें. जिस type को टारगेट करना है उसे सिलेक्टर में पास करें. इससे आपको एक से ज़्यादा व्यू ट्रांज़िशन की स्टाइल को एक-दूसरे से अलग रखने में मदद मिलती है. ऐसा करने पर, एक व्यू ट्रांज़िशन की स्टाइल के हिसाब से, दूसरे व्यू के एलान में रुकावट नहीं आती.

टाइप सिर्फ़ तब लागू होते हैं, जब ट्रांज़िशन को कैप्चर या पूरा करते हैं. इसलिए, किसी एलिमेंट पर view-transition-name को सेट या अनसेट करने के लिए, सिलेक्टर का इस्तेमाल किया जा सकता है. ऐसा सिर्फ़ उस टाइप के व्यू ट्रांज़िशन के लिए किया जा सकता है.

/* Determine what gets captured when the type is forwards or backwards */
html:active-view-transition-type(forwards, backwards) {
  :root {
    view-transition-name: none;
  }
  article {
    view-transition-name: content;
  }
  .pagination {
    view-transition-name: pagination;
  }
}

/* Animation styles for forwards type only */
html:active-view-transition-type(forwards) {
  &::view-transition-old(content) {
    animation-name: slide-out-to-left;
  }
  &::view-transition-new(content) {
    animation-name: slide-in-from-right;
  }
}

/* Animation styles for backwards type only */
html:active-view-transition-type(backwards) {
  &::view-transition-old(content) {
    animation-name: slide-out-to-right;
  }
  &::view-transition-new(content) {
    animation-name: slide-in-from-left;
  }
}

/* Animation styles for reload type only (using the default root snapshot) */
html:active-view-transition-type(reload) {
  &::view-transition-old(root) {
    animation-name: fade-out, scale-down;
  }
  &::view-transition-new(root) {
    animation-delay: 0.25s;
    animation-name: fade-in, scale-up;
  }
}

नीचे दिए गए पेज नंबर दिखाने के डेमो में, पेज का कॉन्टेंट उस पेज नंबर के हिसाब से आगे या पीछे स्लाइड होता है जिस पर आप नेविगेट कर रहे हैं. ये टाइप, उस क्लिक के आधार पर तय होते हैं जिस पर उन्हें document.startViewTransition में पास कर दिया जाता है.

किसी भी ऐक्टिव व्यू के ट्रांज़िशन को टारगेट करने के लिए, इसके बजाय :active-view-transition pseudo-class सिलेक्टर का इस्तेमाल किया जा सकता है. भले ही, वह किसी भी टाइप का हो.

html:active-view-transition {
    …
}

व्यू ट्रांज़िशन रूट पर, क्लास के नाम वाली एक से ज़्यादा व्यू ट्रांज़िशन स्टाइल मैनेज करना

कभी-कभी एक खास तरह के व्यू से दूसरे व्यू में होने वाले ट्रांज़िशन के लिए, खास तौर पर तैयार किया गया ट्रांज़िशन होना चाहिए. या 'पीछे' नेविगेशन, 'आगे' नेविगेशन से अलग होना चाहिए.

ट्रांज़िशन के टाइप से पहले, इन मामलों को हैंडल करने का तरीका ट्रांज़िशन रूट पर अस्थायी तौर पर क्लास का नाम सेट करना था. document.startViewTransition को कॉल करते समय, यह ट्रांज़िशन रूट <html> एलिमेंट होता है. इसे JavaScript में document.documentElement का इस्तेमाल करके ऐक्सेस किया जा सकता है:

if (isBackNavigation) {
  document.documentElement.classList.add('back-transition');
}

const transition = document.startViewTransition(() =>
  updateTheDOMSomehow(data)
);

try {
  await transition.finished;
} finally {
  document.documentElement.classList.remove('back-transition');
}

ट्रांज़िशन पूरा होने के बाद क्लास को हटाने के लिए, इस उदाहरण में transition.finished का इस्तेमाल किया गया है. यह एक ऐसा प्रॉमिस है जो ट्रांज़िशन की आखिरी स्थिति पर पहुंचने के बाद ठीक हो जाता है. इस ऑब्जेक्ट की अन्य प्रॉपर्टी, एपीआई के रेफ़रंस में शामिल की गई हैं.

अब आप ट्रांज़िशन बदलने के लिए अपनी सीएसएस में उस क्लास के नाम का इस्तेमाल कर सकते हैं:

/* 'Forward' transitions */
::view-transition-old(root) {
  animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}

::view-transition-new(root) {
  animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in, 300ms
      cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}

/* Overrides for 'back' transitions */
.back-transition::view-transition-old(root) {
  animation-name: fade-out, slide-to-right;
}

.back-transition::view-transition-new(root) {
  animation-name: fade-in, slide-from-left;
}

मीडिया क्वेरी की तरह ही, इन क्लास की मौजूदगी का इस्तेमाल, यह बदलने के लिए भी किया जा सकता है कि कौनसे एलिमेंट को view-transition-name मिले.

अन्य ऐनिमेशन को फ़्रीज़ किए बिना ट्रांज़िशन चलाएं

वीडियो ट्रांज़िशन की पोज़िशन का डेमो देखें:

क्या आपको इसमें कुछ गलत दिखा? अगर आपने नहीं दिखाया है, तो चिंता न करें. यहां स्पीड कम कर दी गई है:

ट्रांज़िशन के दौरान, वीडियो फ़्रीज़ होने लगता है. इसके बाद, वीडियो का वर्शन फ़ेड इन हो जाता है. ऐसा इसलिए है, क्योंकि ::view-transition-old(video) पुराने व्यू का स्क्रीनशॉट है, जबकि ::view-transition-new(video) नए व्यू की लाइव इमेज है.

इसे ठीक किया जा सकता है. हालांकि, पहले खुद से पूछें कि क्या इसे ठीक करना सही होगा. ट्रांज़िशन की सामान्य रफ़्तार के दौरान अगर आपको 'समस्या' नहीं दिखती, तो मुझे इसे बदलने में कोई परेशानी नहीं होगी.

अगर आपको वाकई इसे ठीक करना है, तो ::view-transition-old(video) न दिखाएं. इसके लिए, सीधे ::view-transition-new(video) पर स्विच करें. डिफ़ॉल्ट स्टाइल और ऐनिमेशन को बदलकर ऐसा किया जा सकता है:

::view-transition-old(video) {
  /* Don't show the frozen old view */
  display: none;
}

::view-transition-new(video) {
  /* Don't fade the new view in */
  animation: none;
}

यह बहुत आसान है!

अब ट्रांज़िशन के दौरान वीडियो चलता रहता है.

JavaScript के साथ ऐनिमेट करना

अब तक, सभी ट्रांज़िशन सीएसएस का इस्तेमाल करके तय किए गए हैं, लेकिन कभी-कभी सीएसएस काफ़ी नहीं होती:

इस ट्रांज़िशन के कुछ हिस्से सिर्फ़ सीएसएस से पूरे नहीं किए जा सकते:

• ऐनिमेशन, क्लिक की जगह से शुरू होता है.
• ऐनिमेशन, सर्कल के आखिर में आता है और इसमें सबसे नीचे कोने तक का दायरा दिखता है. हालांकि, हमें उम्मीद है कि आने वाले समय में सीएसएस की मदद से ऐसा हो पाएगा.

अच्छी बात यह है कि वेब ऐनिमेशन एपीआई का इस्तेमाल करके ट्रांज़िशन बनाए जा सकते हैं!

let lastClick;
addEventListener('click', event => (lastClick = event));

function spaNavigate(data) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow(data);
    return;
  }

  // Get the click position, or fallback to the middle of the screen
  const x = lastClick?.clientX ?? innerWidth / 2;
  const y = lastClick?.clientY ?? innerHeight / 2;
  // Get the distance to the furthest corner
  const endRadius = Math.hypot(
    Math.max(x, innerWidth - x),
    Math.max(y, innerHeight - y)
  );

  // With a transition:
  const transition = document.startViewTransition(() => {
    updateTheDOMSomehow(data);
  });

  // Wait for the pseudo-elements to be created:
  transition.ready.then(() => {
    // Animate the root's new view
    document.documentElement.animate(
      {
        clipPath: [
          `circle(0 at ${x}px ${y}px)`,
          `circle(${endRadius}px at ${x}px ${y}px)`,
        ],
      },
      {
        duration: 500,
        easing: 'ease-in',
        // Specify which pseudo-element to animate
        pseudoElement: '::view-transition-new(root)',
      }
    );
  });
}

इस उदाहरण में transition.ready का इस्तेमाल किया गया है. यह ऐसा प्रॉमिस है जो ट्रांज़िशन साइडो-एलिमेंट बनने के बाद ठीक हो जाता है. इस ऑब्जेक्ट की अन्य प्रॉपर्टी, एपीआई के रेफ़रंस में शामिल की गई हैं.

एन्हैंसमेंट के तौर पर ट्रांज़िशन

व्यू ट्रांज़िशन एपीआई को डीओएम बदलाव को 'रैप' करने और उसके लिए ट्रांज़िशन बनाने के लिए डिज़ाइन किया गया है. हालांकि, ट्रांज़िशन को एन्हैंसमेंट के तौर पर माना जाना चाहिए. अगर डीओएम बदलाव सफल होता है, लेकिन ट्रांज़िशन नहीं हो पाता है, तो आपके ऐप्लिकेशन में 'गड़बड़ी' की स्थिति नहीं होनी चाहिए. आम तौर पर, ट्रांज़िशन पूरा नहीं होना चाहिए. हालांकि, अगर ऐसा होता है, तो उपयोगकर्ता अनुभव में कोई गड़बड़ी नहीं होनी चाहिए.

ट्रांज़िशन को बेहतर बनाने के लिए, ध्यान रखें कि आप ट्रांज़िशन के वादे इस तरह न करें जिससे ट्रांज़िशन पूरा न होने पर आपका ऐप्लिकेशन काम न करे.

async function switchView(data) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    await updateTheDOM(data);
    return;
  }

  const transition = document.startViewTransition(async () => {
    await updateTheDOM(data);
  });

  await transition.ready;

  document.documentElement.animate(
    {
      clipPath: [`inset(50%)`, `inset(0)`],
    },
    {
      duration: 500,
      easing: 'ease-in',
      pseudoElement: '::view-transition-new(root)',
    }
  );
}

इस उदाहरण में समस्या यह है कि अगर ट्रांज़िशन ready की स्थिति तक नहीं पहुंच पाता है, तो switchView() को अस्वीकार कर दिया जाएगा. हालांकि, इसका मतलब यह नहीं है कि व्यू स्विच नहीं किया जा सका. हो सकता है कि डीओएम अपडेट हो गया हो, लेकिन उसमें डुप्लीकेट view-transition-name हों, इसलिए ट्रांज़िशन को स्किप कर दिया गया.

इसके बजाय:

async function switchView(data) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    await updateTheDOM(data);
    return;
  }

  const transition = document.startViewTransition(async () => {
    await updateTheDOM(data);
  });

  animateFromMiddle(transition);

  await transition.updateCallbackDone;
}

async function animateFromMiddle(transition) {
  try {
    await transition.ready;

    document.documentElement.animate(
      {
        clipPath: [`inset(50%)`, `inset(0)`],
      },
      {
        duration: 500,
        easing: 'ease-in',
        pseudoElement: '::view-transition-new(root)',
      }
    );
  } catch (err) {
    // You might want to log this error, but it shouldn't break the app
  }
}

इस उदाहरण में, डीओएम अपडेट का इंतज़ार करने और इसके काम न करने पर, उसे अस्वीकार करने के लिए transition.updateCallbackDone का इस्तेमाल किया गया है. ट्रांज़िशन न होने पर, switchView अब अस्वीकार नहीं करता. डीओएम अपडेट के पूरा होने पर यह ठीक हो जाता है और फ़ेल होने पर अस्वीकार कर दिया जाता है.

अगर आपको नया व्यू 'सेट हो गया' होने पर switchView रिज़ॉल्व हो जाना है, तो ऐनिमेशन वाले किसी भी ट्रांज़िशन के पूरा हो जाने या उसे खत्म होने तक स्किप कर दें, तो transition.updateCallbackDone को transition.finished से बदल दें.

पॉलीफ़िल नहीं है, लेकिन...

यह सुविधा पॉलीफ़िल के लिए आसान नहीं है. हालांकि, यह हेल्पर फ़ंक्शन उन ब्राउज़र में चीज़ों को बहुत आसान बना देता है जो व्यू ट्रांज़िशन के साथ काम नहीं करते:

function transitionHelper({
  skipTransition = false,
  types = [],
  update,
}) {

  const unsupported = (error) => {
    const updateCallbackDone = Promise.resolve(update()).then(() => {});

    return {
      ready: Promise.reject(Error(error)),
      updateCallbackDone,
      finished: updateCallbackDone,
      skipTransition: () => {},
      types,
    };
  }

  if (skipTransition || !document.startViewTransition) {
    return unsupported('View Transitions are not supported in this browser');
  }

  try {
    const transition = document.startViewTransition({
      update,
      types,
    });

    return transition;
  } catch (e) {
    return unsupported('View Transitions with types are not supported in this browser');
  }
}

इसका इस्तेमाल इस तरह से किया जा सकता है:

function spaNavigate(data) {
  const types = isBackNavigation ? ['back-transition'] : [];

  const transition = transitionHelper({
    update() {
      updateTheDOMSomehow(data);
    },
    types,
  });

  // …
}

जो ब्राउज़र व्यू ट्रांज़िशन के साथ काम नहीं करते हैं उनमें अब भी updateDOM को कॉल किया जाएगा, लेकिन ऐनिमेशन वाला ट्रांज़िशन नहीं होगा.

ट्रांज़िशन के दौरान, <html> में जोड़ने के लिए कुछ classNames भी दिए जा सकते हैं. इससे नेविगेशन टाइप के आधार पर ट्रांज़िशन को बदलना आसान हो जाता है.

अगर आपको ऐनिमेशन नहीं चाहिए, तो true को skipTransition पर भी पास किया जा सकता है. ऐसा उन ब्राउज़र में भी किया जा सकता है जो व्यू ट्रांज़िशन के साथ काम करते हैं. यह तब कारगर होता है, जब आपकी साइट में उपयोगकर्ता की पसंद के मुताबिक ट्रांज़िशन बंद हों.

फ़्रेमवर्क के साथ काम करना

अगर किसी ऐसी लाइब्रेरी या फ़्रेमवर्क का इस्तेमाल किया जा रहा है जो डीओएम बदलावों को ऐब्स्ट्रैक्ट कर देती है, तो डीओएम बदलाव पूरा होने का समय पता करना मुश्किल है. यहां अलग-अलग फ़्रेमवर्क के लिए, ऊपर दिए गए हेल्पर का इस्तेमाल करके कुछ उदाहरण दिए गए हैं.

• प्रतिक्रिया—यहां flushSync सबसे अहम है. यह बटन, स्थिति में होने वाले बदलावों को एक साथ लागू करता है. हां, उस एपीआई का इस्तेमाल करने को लेकर एक बड़ी चेतावनी दी गई है, लेकिन डैन अब्रामोव मुझे यकीन दिलाते हैं कि इस मामले में यह सही है. आम तौर पर, React और एक साथ काम न करने वाले कोड के साथ, startViewTransition से मिले अलग-अलग प्रॉमिस का इस्तेमाल करते समय, ध्यान रखें कि आपका कोड सही स्थिति के साथ काम कर रहा हो.
• Vue.js—यहां nextTick कुंजी है, जो डीओएम के अपडेट होने के बाद काम करती है.
• Svelte—यह काफ़ी हद तक Vue से मिलता-जुलता है, लेकिन अगले बदलाव के लिए इंतज़ार करने का तरीका tick है.
• Lit—यह अहम है कि कॉम्पोनेंट में this.updateComplete प्रॉमिस किया गया है. यह डीओएम अपडेट होने के बाद काम करता है.
• Angular—यहां applicationRef.tick कुंजी है, जो लंबित DOM बदलावों को फ़्लश करती है. Angular के वर्शन 17 में, @angular/router के साथ मिलने वाले withViewTransitions का इस्तेमाल किया जा सकता है.

एपीआई का संदर्भ

const viewTransition = document.startViewTransition(update)

नया ViewTransition शुरू करें.

update एक फ़ंक्शन है, जिसे दस्तावेज़ की मौजूदा स्थिति कैप्चर करने के बाद कॉल किया जाता है.

इसके बाद, जब updateCallback से मिलने वाला प्रॉमिस पूरा होता है, तो ट्रांज़िशन अगले फ़्रेम में शुरू हो जाता है. अगर updateCallback से मिलने वाला प्रॉमिस अस्वीकार कर देता है, तो ट्रांज़िशन रद्द कर दिया जाता है.

const viewTransition = document.startViewTransition({ update, types })

बताए गए टाइप के साथ नया ViewTransition शुरू करें

दस्तावेज़ की मौजूदा स्थिति कैप्चर होने के बाद, update को कॉल किया जाता है.

types, ट्रांज़िशन कैप्चर या परफ़ॉर्म करते समय, ट्रांज़िशन के लिए ऐक्टिव टाइप सेट करता है. शुरुआत में यह खाली रहती है. ज़्यादा जानकारी के लिए, viewTransition.types पर और नीचे देखें.

ViewTransition के इंस्टेंस मेंबर:

viewTransition.updateCallbackDone

ऐसा प्रॉमिस जो updateCallback के दिए गए प्रॉमिस को पूरा करने पर पूरा करता है या उसे अस्वीकार करने पर उसे अस्वीकार कर देता है.

व्यू ट्रांज़िशन एपीआई, डीओएम बदलाव को रैप करता है और ट्रांज़िशन बनाता है. हालांकि, कभी-कभी आपको ट्रांज़िशन ऐनिमेशन के सफल या फ़ेल होने की परवाह नहीं होती, बस आपको यह जानना है कि डीओएम बदलाव होता है या नहीं और कब होता है. updateCallbackDone उसी इस्तेमाल के उदाहरण के लिए है.

viewTransition.ready

एक प्रॉमिस जो तब पूरा होता है, जब ट्रांज़िशन के लिए स्यूडो-एलिमेंट बन जाते हैं और ऐनिमेशन शुरू होने वाला होता है.

अगर ट्रांज़िशन शुरू नहीं हो पाता है, तो यह न्योता अस्वीकार कर देता है. ऐसा गलत तरीके से कॉन्फ़िगर करने की वजह से हो सकता है, जैसे कि डुप्लीकेट view-transition-name या updateCallback, अस्वीकार किए गए प्रॉमिस को दिखाता है.

यह JavaScript के साथ ट्रांज़िशन स्यूडो-एलिमेंट को ऐनिमेट करने के लिए फ़ायदेमंद है.

viewTransition.finished

एक ऐसा प्रॉमिस जिसे तब पूरा किया जाता है, जब इस्तेमाल करने वाले को एंड स्टेट पूरी तरह दिख जाता है और इंटरैक्टिव हो जाता है.

यह सुविधा सिर्फ़ तब अस्वीकार करती है, जब updateCallback अस्वीकार किए गए प्रॉमिस को जवाब देता है, क्योंकि इससे पता चलता है कि खत्म होने की स्थिति नहीं बनाई गई थी.

ऐसा नहीं होने पर, अगर ट्रांज़िशन शुरू नहीं हो पाता है या ट्रांज़िशन के दौरान उसे छोड़ दिया जाता है, तो भी आखिरी स्थिति तक पहुंच सकती है. इसलिए, finished पूरा करता है.

viewTransition.types

Set जैसा ऑब्जेक्ट, जिसमें ऐक्टिव व्यू के ट्रांज़िशन टाइप होते हैं. एंट्री में बदलाव करने के लिए, इसके इंस्टेंस तरीकों clear(), add(), और delete() का इस्तेमाल करें.

सीएसएस में किसी खास टाइप का रिस्पॉन्स देने के लिए, ट्रांज़िशन रूट पर :active-view-transition-type(type) pseudo-class सिलेक्टर का इस्तेमाल करें.

व्यू ट्रांज़िशन पूरा होने के बाद, टाइप अपने-आप हट जाते हैं.

viewTransition.skipTransition()

ट्रांज़िशन के ऐनिमेशन वाले हिस्से को छोड़ें.

इससे updateCallback को कॉल करना स्किप नहीं होगा, क्योंकि डीओएम बदलाव, ट्रांज़िशन से अलग होता है.

डिफ़ॉल्ट स्टाइल और ट्रांज़िशन रेफ़रंस

::view-transition

रूट pseudo-element जो व्यूपोर्ट को भरता है और जिसमें हर ::view-transition-group शामिल होता है.

::view-transition-group

पूरी तरह से खड़ा.

'पहले' और 'बाद' वाली स्थितियों के बीच, width और height का ट्रांज़िशन.

transform का 'पहले' और 'बाद' व्यूपोर्ट-स्पेस क्वाड के बीच ट्रांज़िशन.

::view-transition-image-pair

समूह को भरने के लिए पूरी तरह तैयार है.

इसमें isolation: isolate है, जो पुराने और नए व्यू पर mix-blend-mode के असर को सीमित करता है.

::view-transition-new और ::view-transition-old

रैपर के ठीक ऊपर बाईं ओर मौजूद.

ग्रुप की चौड़ाई का 100% भर जाता है, लेकिन इसकी ऊंचाई अपने-आप सेट हो जाती है. इसलिए, ग्रुप को भरने के बजाय, यह अपने आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) को बनाए रखेगा.

इसमें mix-blend-mode: plus-lighter, जो सही क्रॉस-फ़ेड करने की अनुमति देता है.

पुराने व्यू को opacity: 1 से opacity: 0 में बदल दिया जाता है. नया व्यू opacity: 0 से opacity: 1 में बदल जाता है.

सुझाव/राय दें या शिकायत करें

डेवलपर के फ़ीडबैक की हमेशा सराहना की जाती है. इसके लिए, GitHub पर सीएसएस वर्किंग ग्रुप में समस्या दर्ज करें. साथ ही, सुझाव और सवाल भी शामिल करें. [css-view-transitions] से जुड़ी अपनी समस्या प्रीफ़िक्स करें.

अगर आपको किसी गड़बड़ी का सामना करना पड़ता है, तो Chromium में गड़बड़ी की शिकायत करें.