在 React.js 应用程序中查看过渡动画

前几天我想为网站创建快速删除列表动画的项目。这次跳过React Transition Group，尝试新的View Transition，节省时间。

当很少有代码能做到这一点时，为什么要编写大量代码。

View Transition API 仅适用于 Chrome，但我不在乎。

关键是document.startViewTransition。

但是需要在state之前、state之后建立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
    ? <T>(newValue: T) => {
        const [value, setValue] = useState<T>(newValue);
        if (value !== newValue) {
          document.startViewTransition(() => {
            flushSync(() => {
              setValue(newValue);
            });
          });
        }
        return value;
      }
    : <T>(value: T) => value;

如果使用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>
);

现在当useQuery更新时，hook调用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：不要转换整个页面，仅转换列表项。

现在消息列表动画工作了。非常好。

以上是在 React.js 应用程序中查看过渡动画的详细内容。更多信息请关注PHP中文网其他相关文章！