Afficher l'animation de transition dans l'application React.js

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

Pourquoi écrire beaucoup de code alors que peu de codes fonctionnent.

Affichez 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 crochet :

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;

Si vous utilisez 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>
);

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 sur une page entière, mais uniquement sur les éléments de la liste.

Maintenant, l'animation de la liste de messages fonctionne. Très sympa.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!