डायरेक्शनल नेविगेशन ट्रांज़िशन

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

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

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

1. नेविगेशन की दिशा का पता लगाना: यह तय करें कि उपयोगकर्ता, ऐप्लिकेशन फ़्लो में "आगे" बढ़ रहा है या "पीछे" जा रहा है. दिशा का पता लगाने का तरीका, आपके इस्तेमाल के उदाहरण पर निर्भर करता है.
2. टाइप के साथ ट्रांज़िशन ट्रिगर करना: ट्रांज़िशन को कैटगरी में बांटने के लिए, types कलेक्शन में मौजूद दिशा को document.startViewTransition() में पास करें.
3. सीएसएस की मदद से, डायरेक्शनल ऐनिमेशन तय करना: नेविगेशन टाइप के आधार पर खास ऐनिमेशन लागू करने के लिए, :active-view-transition-type() स्यूडो-क्लास का इस्तेमाल करें.

कीफ़्रेम के बारे में जानकारी

हर दिशा में स्लाइड होने वाले ऐनिमेशन तय करें. बेहतर परफ़ॉर्मेंस के लिए, transform प्रॉपर्टी या अलग-अलग ट्रांसफ़ॉर्म प्रॉपर्टी, scale, rotate, और translate का इस्तेमाल करके, पोज़िशन में होने वाले बदलावों को ऐनिमेट करें. आम तौर पर, opacity भी अच्छा परफ़ॉर्म करता है. हालांकि, अन्य सीएसएस प्रॉपर्टी को ऐनिमेट करने से पहले, यह पुष्टि कर लें कि वे लेआउट या पेंटिंग को ट्रिगर न करें.

/* Slide an element out to the left */
@keyframes slide-to-left {
  /* Mandatory: animate `transform` instead of inset properties for better performance. */
  to { transform: translateX(-100%); }
}

/* Slide an element in from the right */
@keyframes slide-from-right {
  from { transform: translateX(100%); }
}

/* Slide an element out to the right */
@keyframes slide-to-right {
  to { transform: translateX(100%); }
}

/* Slide an element in from the left */
@keyframes slide-from-left {
  from { transform: translateX(-100%); }
}

शेयर किए गए ऐनिमेशन की सेटिंग सेट अप करना

सभी ट्रांज़िशन के साथ शेयर की गई ऐनिमेशन सेटिंग लागू करने के लिए, ::view-transition-group(root) सिलेक्टर का इस्तेमाल करें.

::view-transition-group(root){
  animation: 0.4s ease-in-out both;
}

डायरेक्शनल ऐनिमेशन लागू करना

active-view-transition-type स्यूडो-क्लास का इस्तेमाल करके, ट्रांज़िशन व्यू को खास तौर पर तब टारगेट करें, जब "फ़ॉरवर्ड" या "बैकवर्ड" टाइप चालू हो.

/* MANDATORY: Apply forward animations when the 'forward' type is active */
html:active-view-transition-type(forward)::view-transition-old(root) {
  animation-name: slide-to-left;
}
html:active-view-transition-type(forward)::view-transition-new(root) {
  animation-name: slide-from-right;
}

/* MANDATORY: Apply backward animations when the 'backward' type is active */
html:active-view-transition-type(backward)::view-transition-old(root) {
  animation-name: slide-to-right;
}
html:active-view-transition-type(backward)::view-transition-new(root) {
  animation-name: slide-from-left;
}

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

नेविगेट करते समय, startViewTransition तरीके में सही टाइप पास करें.

const transitionType = yourTransitionTypeLogic();
const updateDOM = yourUpdateDOMLogic();

document.startViewTransition({
  update: updateDOM,
  types: [transitionType] // Matches the CSS :active-view-transition-type() selectors
});

सुलभता

ऐनिमेशन को बंद करके या आसान बनाकर, कम मोशन के लिए उपयोगकर्ता की प्राथमिकताओं का हमेशा सम्मान करें.

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(root) {
    animation: none !important;
  }
}

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

View Transitions API, प्रोग्रेसिव एनहैंसमेंट है. जिन ब्राउज़र पर यह सुविधा काम नहीं करती उनमें document.startViewTransition, undefined के तौर पर दिखेगा. आपको अपने नेविगेशन लॉजिक को सुविधा की पहचान करने की जांच में रैप करना होगा. इससे यह पक्का किया जा सकेगा कि डीओएम अपडेट, ऐनिमेशन के बिना तुरंत हो. जैसा कि इस हेल्पर फ़ंक्शन में दिखाया गया है.

/**
 * Navigates to a new view with a directional transition.
 * @param {Function} updateDOM - Callback to update the DOM state.
 * @param {string} direction - Either 'forward' or 'backward'.
 */
function navigate(updateDOM, direction) {
  // Feature detect for browsers that do not support View Transitions
  if (!document.startViewTransition) {
    updateDOM();
    return;
  }

  // Start transition with the specific navigation type
  document.startViewTransition({
    update: updateDOM,
    types: [direction] // Matches the CSS :active-view-transition-type() selectors
  });
}