Otro día quiero crear una animación de eliminación rápida de elementos de la lista para el sitio. Esta vez omita el grupo de transición de React, pruebe la nueva transición de vista y ahorre tiempo.

¿Por qué escribir código de lote cuando pocos códigos funcionan?

Ver API de transición solo para Chrome, pero no me importa.

El quid es document.startViewTransition.

Pero es necesario establecer DOM antes del estado, después del estado, pero React.js no lo permite.

React.js reactivo. No sincrónico. document.startViewTransition necesita sincronización.

Pregunta a Google Learn:

import { flushSync } from "react-dom";

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

Yo escribo gancho:

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 usa useQuery

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

const msgs = useViewTransition(newMsgs);

return (
  

    {msgs?.map(item => (
      

        {item.title}
      
    ))}
  
);

Ahora, cuando useQuery update, conecte la llamada a document.startViewTransition y luego setState.

Necesita CSS global

Agrego global.css:

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

Esto le dice a Chrome: no realice la transición de toda la página, solo transfiera los elementos de la lista.

Ahora la animación de la lista de mensajes funciona. Muy lindo.