Maison  >  Article  >  interface Web  >  Afficher l'animation de transition dans l'application React.js

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

王林
王林original
2024-08-23 14:31:15952parcourir

View Transition Animation in React.js App

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn