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 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.

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

Crux 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 d'apprendre :

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, j'ajoute 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!