ग्रुप एलिमेंट ट्रांज़िशन

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

लागू करने के चरण

1. यूनीक नाम और शेयर की गई क्लास असाइन करना

   ट्रांज़िशन के दौरान, अलग-अलग ट्रैक किए जाने वाले हर एलिमेंट के लिए एक यूनीक view-transition-name होना चाहिए.

   <!-- Mandatory: Each element must have a unique view-transition-name -->
   <li style="view-transition-name: item-1" class="item">Item 1</li>
   <li style="view-transition-name: item-2" class="item">Item 2</li>
   

   शेयर की गई स्टाइल लागू करने के लिए, view-transition-class भी असाइन करें.

   .item {
     view-transition-class: list-item;
   }
   

2. शेयर किए गए ट्रांज़िशन लॉजिक को तय करना

   उस ग्रुप के सभी सदस्यों पर स्टाइल लागू करने के लिए, क्लास सिलेक्टर के साथ ::view-transition-group() स्यूडो-एलिमेंट का इस्तेमाल करें.

   /* Targets any view transition group that has the 'list-item' class */
   ::view-transition-group(.list-item) {
     animation-duration: 0.5s;
     animation-timing-function: ease-in-out;
   }
   
   /* Handle accessibility by respecting motion preferences */
   @media (prefers-reduced-motion: reduce) {
     /* Disable all group transitions, including the default `root` group. */
     ::view-transition-group(*),
     ::view-transition-old(*),
     ::view-transition-new(*) {
       animation: none !important;
     }
   }
   

3. ज़रूरी नहीं: ऑब्जेक्ट को सीन में शामिल करने और हटाने पर दिखने वाले ऐनिमेशन तय करना

   जोड़े गए या हटाए गए एलिमेंट में खास ट्रांज़िशन जोड़ने के लिए, :only-child सिलेक्टर का इस्तेमाल करें. ::view-transition-new() और ::view-transition-old() स्यूडो-एलिमेंट, ::view-transition-image-pair() स्यूडो-एलिमेंट के चाइल्ड एलिमेंट होते हैं. इसलिए, अगर यह इकलौता चाइल्ड एलिमेंट है, तो हम यह तय कर सकते हैं कि यह जोड़ा गया एलिमेंट है या हटाया गया एलिमेंट.

   /* A `::view-transition-new()` element is the only child if it wasn't present before the view transition, so it is an added element. */
   ::view-transition-new(.list-item):only-child {
     animation-name: slide-in;
     /* Specify an animation duration if you want something different than the UA default of 0.5s */
     animation-duration: 1s;
   }
   /* A `::view-transition-old()` element is the only child if it isn't present after the view transition, so it is a removed element. */
   ::view-transition-old(.list-item):only-child {
     animation-name: slide-out;
     /* Specify an animation duration if you want something different than the UA default of 0.5s */
     animation-duration: 1s;
   }
   
   @keyframes slide-in {
     from {
       translate: -100vw 0;
     }
   }
   @keyframes slide-out {
     to {
       translate: -100vw 0;
     }
   }
   

4. ट्रांज़िशन ट्रिगर करना

   डीओएम अपडेट को document.startViewTransition() में रैप करें. ब्राउज़र, पुराने व्यू को कैप्चर करेगा, अपडेट करेगा, और फिर नए व्यू पर ऐनिमेशन दिखाएगा.

   function updateList(newData) {
     document.startViewTransition(() => {
       // All DOM changes inside this callback will be transitioned
       render(newData);
     });
   }
   

5. ट्रांज़िशन न किए गए एलिमेंट की इंटरैक्टिविटी बनाए रखना

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

::view-transition {
  /* Non-transitioned elements below the view transitions remain interactive */
  pointer-events: none;
}

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

:root {
  /* Disable the root transition because we are only transitioning specific elements. */
  view-transition-name: none;
}

फ़ॉलबैक रणनीतियां

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

if (document.startViewTransition) {
  document.startViewTransition(() => updateDOM());
} else {
  // Fallback: Perform the update without animation
  updateDOM();
}

सीएसएस के लिए, view-transition-class या ::view-transition-group() क्लास सिलेक्टर को न पहचानने वाले ब्राउज़र, उन नियमों को अनदेखा कर देंगे. साथ ही, कोई ऐनिमेशन लागू नहीं होगा.