Afficher l'animation de transition dans l'application React.js
Aug 23, 2024 pm 02:31 PMUn 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!

Article chaud

Outils chauds Tags

Article chaud

Tags d'article chaud

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds

Ajout d'ombres de boîte aux blocs et éléments WordPress

Créez un formulaire de contact JavaScript avec le cadre Smart Forms

Créer un éditeur de texte en ligne avec l'attribut satisfaistable

Faire votre première transition Svelte personnalisée

Comparaison des 5 meilleurs constructeurs de formulaires PHP (et 3 scripts libres)

Téléchargement de fichiers avec Multer dans Node.js et Express
