Un autre jour, je souhaite créer des éléments de suppression rapide de l'animation de liste pour le site. Cette fois, ignorez React Transition Group, essayez une nouvelle View Transition, gagnez du temps.

Pourquoi écrire du code de lot alors que peu de codes fonctionnent.

Afficher l'API de transition Chrome uniquement, mais je m'en fiche.

Le point crucial est document.startViewTransition.

Mais il faut établir le DOM avant l'état, après l'état, mais React.js ne le permet pas.

React.js réactif. Pas synchrone. document.startViewTransition doit être synchrone.

Demandez à Google Learn :

import { flushSync } from "react-dom";

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

Moi j'écris le crochet :

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;

Si vous utilisez useQuery

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

const msgs = useViewTransition(newMsgs);

return (
  

    {msgs?.map(item => (
      

        {item.title}
      
    ))}
  
);

Maintenant, lors de la mise à jour de useQuery, appelez document.startViewTransition puis setState.

Besoin d'un CSS global

Moi ajouter global.css :

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

Cela indique à Chrome : ne faites pas la transition de la page entière, uniquement les éléments de la liste de transition.

Maintenant, l'animation de la liste de messages fonctionne. Très agréable.