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

百变鹏仔 4个月前 (09-19) #CSS

文章标签应用程序

有一天，我想为网站创建快速从列表动画中删除项目的功能。这次跳过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(() =&gt; setstate(...));

我写钩子：

import { usestate } from "react";import { flushsync } from "react-dom";export const useviewtransition =  typeof document !== "undefined" &amp;&amp; "startviewtransition" in document    ? <t>(newvalue: t) =&gt; {        const [value, setvalue] = usestate<t>(newvalue);        if (value !== newvalue) {          document.startviewtransition(() =&gt; {            flushsync(() =&gt; {              setvalue(newvalue);            });          });        }        return value;      }    : <t>(value: t) =&gt; value;</t></t></t>

如果使用usequery

const { data: newmsgs } = usequery({  querykey: ["msgs"],  queryfn: msgs.all(25)});const msgs = useviewtransition(newmsgs);return (  <ol>    {msgs?.map(item =&gt; (      <li key="{item.id}" style="{{" viewtransitionname: item.id viewtransitionclass:>        {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 应用程序中查看过渡动画

如果使用usequery

需要全局css

css如何让导航栏变透明

css 怎么去除a标签的手形

css里怎样设置字体大小和字体颜色

css如何固定导航栏

css边框变圆角边框怎么写