На днях я хочу создать анимацию быстрого удаления элементов из списка для сайта. На этот раз пропустите группу React Transition Group, попробуйте новый View Transition, сэкономьте время.

Зачем писать много кода, когда немногие коды делают трюки.

Просматривать Transition API только в Chrome, но мне все равно.

Суть заключается в document.startViewTransition.

Но нужно установить DOM до состояния и после состояния, но React.js этого не позволяет.

React.js реактивный. Не синхронно. document.startViewTransition должен быть синхронным.

Спросите Google, чтобы узнать:

import { flushSync } from "react-dom";

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

Я пишу припев:

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;

Если использовать useQuery

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

const msgs = useViewTransition(newMsgs);

return (
  

    {msgs?.map(item => (
      

        {item.title}
      
    ))}
  
);

Теперь при обновлении useQuery перехватите вызов document.startViewTransition, а затем setState.

Нужен глобальный CSS

Я добавляю global.css:

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

Это говорит Chrome: не перемещайте всю страницу, а только элементы списка.

Теперь работает анимация списка сообщений. Очень хорошо.