◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。
有一天,我想为网站创建快速从列表动画中删除项目的功能。这次跳过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; </t></t></t>
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: item.id viewtransitionclass:> {item.title} </li> ))} </ol> );
现在当 usequery 更新时,hook 调用 document.startviewtransition 然后 setstate。
我添加global.css:
@supports (view-transition-name: none) { ::view-transition-group(root) { animation-duration: 0s; } ::view-transition-group(.mymsg) { animation-duration: 0.4s; } }
这告诉 chrome:不要转换整个页面,只转换列表项。
现在消息列表动画工作了。非常好。
◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。