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

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

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

1. क्रॉस-डॉक्यूमेंट व्यू ट्रांज़िशन के लिए ऑप्ट-इन करना

सोर्स और डेस्टिनेशन, दोनों पेजों को व्यू ट्रांज़िशन के लिए ऑप्ट-इन करना होगा, ताकि ब्राउज़र उन्हें नेविगेशन पर ट्रिगर कर सके.

/* Respect user's preference for reduced motion */
@media (prefers-reduced-motion: no-preference) {
  /* Add to a global stylesheet shared by both pages */
  @view-transition {
    /* Enables transitions for same-origin navigations */
    navigation: auto;
  }
}

2. ट्रांज़िशन ऐनिमेशन को पसंद के मुताबिक बनाना (ज़रूरी नहीं)

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

/* Customizing the outgoing page animation */
::view-transition-old(root) {
  /* Move the old page out to the left */
  animation: 0.4s ease-in both slide-out;
}

/* Customizing the incoming page animation */
::view-transition-new(root) {
  /* Move the new page in from the right */
  animation: 0.4s ease-out both slide-in;
}

@keyframes slide-out {
  to { transform: translateX(-20%); opacity: 0; }
}

@keyframes slide-in {
  from { transform: translateX(100%); }
}

3. डायरेक्शनल ट्रांज़िशन बनाना (ज़रूरी नहीं)

आपको अलग-अलग पेजों के बीच नेविगेट करने के लिए, अलग-अलग ट्रांज़िशन इफ़ेक्ट चाहिए हो सकते हैं. उदाहरण के लिए, होम पेज से संपर्क पेज पर जाने पर, हो सकता है कि आपको दाईं ओर से आने वाले नए कॉन्टेंट का इफ़ेक्ट चाहिए. होम पेज पर वापस जाने पर, इस तरह का इफ़ेक्ट इस्तेमाल करना सही नहीं होगा.

अगर आपको किसी पेज पर जाने के लिए हमेशा एक ही ट्रांज़िशन टाइप का इस्तेमाल करना है, तो @view-transition नियम में types का इस्तेमाल करके इसकी जानकारी दी जा सकती है. इससे कोई फ़र्क़ नहीं पड़ता कि आपने पेज पर जाने के लिए कौनसा तरीका अपनाया है.

@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
    /* Specify the types of view transitions that will always be used on this page. */
    types: previous;
  }
}

pagereveal के लिए, इवेंट लिसनर में ट्रांज़िशन टाइप को शर्त के साथ भी तय किया जा सकता है.

window.addEventListener("pagereveal", async (e) => {
  if (e.viewTransition && window.navigation?.activation) {
    // Use application-specific logic to compute a transition type
     const transitionType = yourTransitionTypeLogic(navigation.activation.from, navigation.activation.entry);
    e.viewTransition.types.add(transitionType);
  }
});

इसके बाद, हर टाइप के लिए अलग-अलग ऐनिमेशन लागू करने के लिए, :active-view-transition-type() सूडो सिलेक्टर का इस्तेमाल करें.

:active-view-transition-type(next) {
  &::view-transition-old(root) {
    animation-name: slide-out-next;
  }

  &::view-transition-new(root) {
    animation-name: slide-in-next;
  }
}
:active-view-transition-type(previous) {
  &::view-transition-old(root) {
    animation-name: slide-out-previous;
  }

  &::view-transition-new(root) {
    animation-name: slide-in-previous;
  }
}

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

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

JavaScript में सहायता पाने के लिए:

if ('onpagereveal' in window) {
  // Browser supports cross-document view transitions
}

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

JavaScript में सहायता पाने के लिए:

if (window.navigation?.activation) {
  // Browser supports the Navigation API
}