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

编程并不是一个机械性的工作，而是需要有思考，有创新的工作，语法是固定的，但解决问题的思路则是依靠人的思维，这就需要我们坚持学习和更新自己的知识。今天golang学习网就整理分享《在 Reactjs 应用程序中查看过渡动画》，文章讲解的知识点主要包括，如果你对文章方面的知识点感兴趣，就不要错过golang学习网，在这可以对大家的知识积累有所帮助，助力开发能力的提升。

有一天，我想为网站创建快速从列表动画中删除项目的功能。这次跳过react transition group，尝试新的view transition，节省时间。

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

view transition api 仅适用于 chrome，但我不在乎。

关键是 document.startviewtransition.

但是需要在state之前、state之后建立dom，但react.js不允许。

react.js 反应式。不同步。 document.startviewtransition 需要同步。

问谷歌学习：

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：不要转换整个页面，只转换列表项。

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

本篇关于《在 Reactjs 应用程序中查看过渡动画》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！