सीएसएस और व्यू ट्रांज़िशन का उपयोग करके प्रकाश से अंधेरे मोड में स्थानांतरित करते समय अच्छा प्रभाव जोड़ें

ट्विटर पर @jhey से कॉपी किया गया

[!टिप्पणी]
इसका मतलब है कि आपने अपनी थीम को अपडेट करने के लिए किसी प्रकार के फ़ंक्शन के साथ पहले से ही अपना डार्क लाइट मोड सेटअप कर लिया है

1. सीएसएस जोड़ें

  /* Angled */
  [data-style='angled']::view-transition-old(root) {
    animation: none;
    z-index: -1;
  }

  [data-style='angled']::view-transition-new(root) {
    animation: unclip 1s;
    clip-path: polygon(-100vmax 100%, 100% 100%, 100% -100vmax);
  }

  @keyframes unclip {
    0% {
      clip-path: polygon(100% 100%, 100% 100%, 100% 100%);
    }
  }

1. सुनिश्चित करें कि डेटा-शैली = "कोणीय" विशेषता मूल तत्व पर सेट है एसपीए प्रतिक्रिया में हम यूज़इफ़ेक्ट हुक का उपयोग करते हैं

  useEffect(() => {
    // set the data-style attribute
    document.documentElement.dataset.style = "angled";
  }, []);

SSR में इसे सीधे html टैग में सेट किया जा सकता है

1. व्यू ट्रांज़िशन शुरू करने के लिए अपने थीम परिवर्तन फ़ंक्शन को documnet.startViewTransition में लपेटें

  function transitionColors() {
    if (typeof window !== "undefined") {
      document.startViewTransition(() => {
        const newTheme = theme  === "light" ? "dark" : "light";
        document.documentElement.dataset.theme = newTheme;
        updateTheme(newTheme);
      });
    }
  }

संबंधित सीएसएस फ़ाइल को शामिल करके और सही डेटा-शैली विशेषता जोड़कर अधिक संक्रमण शैलियाँ जोड़ी जा सकती हैं

      
          (document.documentElement.dataset.style = e.target.value)
        }
      >
        DefaultVerticalWipeAngledFlipSlides

प्रतिक्रिया उदाहरण

यदि आपको इस प्रकार की सीएसएस युक्तियाँ पसंद हैं तो निम्नलिखित पर विचार करें