किसी दिन मैं साइट के लिए सूची एनीमेशन से त्वरित रूप से हटाए जाने वाले आइटम बनाना चाहता हूं। इस बार रिएक्ट ट्रांज़िशन ग्रुप को छोड़ें, नया व्यू ट्रांज़िशन आज़माएं, समय बचाएं।

जब कुछ कोड ट्रिक करते हैं तो लॉट कोड क्यों लिखें।

केवल ट्रांजिशन एपीआई क्रोम देखें, लेकिन मुझे कोई परवाह नहीं।

क्रूक्स document.startViewTransition है।

लेकिन राज्य से पहले, राज्य के बाद DOM स्थापित करने की आवश्यकता है, लेकिन React.js अनुमति नहीं देता है।

React.js प्रतिक्रियाशील। समकालिक नहीं. document.startViewTransition को सिंक्रोनस की आवश्यकता है।

Google से सीखें:

import { flushSync } from "react-dom";

flushSync(() => setState(...));

मैं हुक लिखता हूं:

import { useState } from "react";
import { flushSync } from "react-dom";

export const useViewTransition =
  typeof document !== "undefined" && "startViewTransition" in document
    ? (newValue: T) => {
        const [value, setValue] = useState(newValue);
        if (value !== newValue) {
          document.startViewTransition(() => {
            flushSync(() => {
              setValue(newValue);
            });
          });
        }
        return value;
      }
    : (value: T) => value;

यदि useQuery का उपयोग करें

const { data: newMsgs } = useQuery({
  queryKey: ["msgs"],
  queryFn: msgs.all(25)
});

const msgs = useViewTransition(newMsgs);

return (
  

    {msgs?.map(item => (
      

        {item.title}
      
    ))}
  
);

अब जब क्वेरी अपडेट का उपयोग करें, तो हुक कॉल document.startViewTransition फिर setState.

वैश्विक सीएसएस की आवश्यकता है

मैं ग्लोबल.सीएसएस जोड़ता हूं:

@supports (view-transition-name: none) {
  ::view-transition-group(root) {
    animation-duration: 0s;
  }
  ::view-transition-group(.mymsg) {
    animation-duration: 0.4s;
  }
}

यह क्रोम को बताता है: पूरे पृष्ठ को परिवर्तित न करें, केवल सूची आइटम को परिवर्तित करें।

अब संदेश सूची एनीमेशन काम करता है। बहुत अच्छा।