有一天，我想为网站创建快速从列表动画中删除项目的功能。这次跳过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：不要转换整个页面，只转换列表项。
现在消息列表动画工作了。非常好。