Neulich möchte ich schnell eine Animation zum Entfernen von Elementen aus der Liste für die Website erstellen. Überspringen Sie dieses Mal die React Transition Group, probieren Sie den neuen View Transition aus und sparen Sie Zeit.

Warum Loscode schreiben, wenn nur wenige Codes funktionieren.

Übergangs-API nur für Chrome anzeigen, aber mir ist das egal.

Der Kernpunkt ist document.startViewTransition.

Es muss jedoch ein DOM vor dem Status und nach dem Status eingerichtet werden, aber React.js erlaubt das nicht.

React.js reaktiv. Nicht synchron. document.startViewTransition benötigt synchron.

Fragen Sie Google, lernen Sie:

import { flushSync } from "react-dom";

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

Ich schreibe Hook:

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;

Bei Verwendung von useQuery

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

const msgs = useViewTransition(newMsgs);

return (
  

    {msgs?.map(item => (
      

        {item.title}
      
    ))}
  
);

Wenn Sie jetzt die Abfrage aktualisieren, rufen Sie document.startViewTransition auf und setzen Sie dann setState.

Benötigen Sie globales CSS

Ich füge global.css hinzu:

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

Dies teilt Chrome mit: Übertragen Sie nicht die gesamte Seite, sondern nur Elemente der Liste.

Jetzt funktioniert die Animation der Nachrichtenliste. Sehr schön.