在 React.js 应用程序中查看过渡动画

王林
发布: 2024-08-23 14:31:15
原创
749 人浏览过

View Transition Animation in React.js App

有一天我想为网站创建快速从列表动画中删除项目。这次跳过React Transition Group,尝试新的View Transition,节省时间。

当很少有代码能做到这一点时,为什么要编写大量代码。

View Transition API 仅适用于 Chrome,但我不在乎。

关键是 document.startViewTransition.

但是需要在state之前、state之后建立DOM,但React.js不允许。

React.js 反应式。不同步。 document.startViewTransition 需要同步。

问谷歌学习:

雷雷

我写钩子:

雷雷

如果使用useQuery

雷雷

现在当 useQuery 更新时,hook 调用 document.startViewTransition 然后 setState。

需要全局CSS

我添加global.css:

雷雷

这告诉 Chrome:不要转换整个页面,只转换列表项。

现在消息列表动画工作了。非常好。

以上是在 React.js 应用程序中查看过渡动画的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:dev.to
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!