有一天我想为网站创建快速从列表动画中删除项目。这次跳过React Transition Group,尝试新的View Transition,节省时间。
当很少有代码能做到这一点时,为什么要编写大量代码。
View Transition API 仅适用于 Chrome,但我不在乎。
关键是 document.startViewTransition.
但是需要在state之前、state之后建立DOM,但React.js不允许。
React.js 反应式。不同步。 document.startViewTransition 需要同步。
问谷歌学习:
我写钩子:
现在当 useQuery 更新时,hook 调用 document.startViewTransition 然后 setState。
我添加global.css:
这告诉 Chrome:不要转换整个页面,只转换列表项。
现在消息列表动画工作了。非常好。
以上是在 React.js 应用程序中查看过渡动画的详细内容。更多信息请关注PHP中文网其他相关文章!