Übergangsanimation in der React.js-App anzeigen

Neulich möchte ich eine schnelle 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 viel Code schreiben, wenn nur wenige Codes funktionieren.

Transition API nur Chrome anzeigen, aber mir ist das egal.

Der Kernpunkt ist document.startViewTransition.

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

React.js reaktiv. Nicht synchron. document.startViewTransition muss synchron sein.

Fragen Sie Google Learn:

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
    ? <T>(newValue: T) => {
        const [value, setValue] = useState<T>(newValue);
        if (value !== newValue) {
          document.startViewTransition(() => {
            flushSync(() => {
              setValue(newValue);
            });
          });
        }
        return value;
      }
    : <T>(value: T) => value;

Bei Verwendung von useQuery

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

const msgs = useViewTransition(newMsgs);

return (
  <ol>
    {msgs?.map(item => (
      <li 
        key={item.id} 
        style={{
          viewTransitionName: "msg-" + item.id,
          viewTransitionClass: "mymsg",
        }}
      >
        {item.title}
      </li>
    ))}
  </ol>
);

Wenn Sie nun 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 sagt Chrome: Übertragen Sie nicht die gesamte Seite, sondern nur die Elemente der Liste.

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

Das obige ist der detaillierte Inhalt vonÜbergangsanimation in der React.js-App anzeigen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!