在 Reactjs 应用程序中查看过渡动画

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
    ? <t>(newvalue: t) => {
        const [value, setvalue] = usestate<t>(newvalue);
        if (value !== newvalue) {
          document.startviewtransition(() => {
            flushsync(() => {
              setvalue(newvalue);
            });
          });
        }
        return value;
      }
    : <t>(value: t) => value;

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>
);

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