有一天，我想为网站创建快速从列表动画中删除项目的功能。这次跳过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 ? (newvalue: t) => { const [value, setvalue] = usestate(newvalue); if (value !== newvalue) { document.startviewtransition(() => { flushsync(() => { setvalue(newvalue); }); }); } return value; } : (value: t) => value;
如果使用usequery
const { data: newmsgs } = usequery({ querykey: ["msgs"], queryfn: msgs.all(25)});const msgs = useviewtransition(newmsgs);return ( {msgs?.map(item => ( - {item.title}
))}
);
现在当 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 应用程序中查看过渡动画的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1629722.html
微信扫一扫 
支付宝扫一扫 
