Outro dia eu quero criar itens de remoção rápida da animação de lista para o site. Desta vez, pule o React Transition Group, experimente a nova View Transition e economize tempo.

Por que escrever muitos códigos quando poucos códigos funcionam.

Ver API de transição apenas no Chrome, mas não me importo.

Crux é document.startViewTransition.

Mas é necessário estabelecer o DOM antes do estado, depois do estado, mas o React.js não permite.

React.js reativo. Não síncrono. document.startViewTransition precisa de síncrono.

Pergunte ao Google para saber:

import { flushSync } from "react-dom";

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

Meu gancho de escrita:

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;

Se usar useQuery

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

const msgs = useViewTransition(newMsgs);

return (
  

    {msgs?.map(item => (
      

        {item.title}
      
    ))}
  
);

Agora, quando useQuery update, ligue para document.startViewTransition e depois setState.

Precisa de CSS global

Eu adicione global.css:

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

Isso diz ao Chrome: não faça a transição da página inteira, apenas faça a transição dos itens da lista.

Agora a animação da lista de mensagens funciona. Muito legal.