#优质博文 #前端 #react #动画 #css #新特性
还挺有意思的

Revealed: React's experimental animations API

AI 摘要：文章介绍了 React 集成实验性 View Transition API，通过浏览器原生功能实现状态切换时的平滑动画。使用 <ViewTransition /> 包裹组件，可自动处理 DOM 变化的过渡效果，并由 Motion.dev 提供封装简化操作。
尽管提升了动画实现的效率和简洁性，但它还是一个实验性 API ，可能随时发生变化，这些早期版本的目的是发现 API 中的错误和漏洞，因此不适用生产环境，可以玩玩。

via motion.dev

View Transition API 是一项新的浏览器功能，允许开发人员在任意两个视图之间进行动画处理。
它非常强大，允许以前不可设置动画的值进行动画处理，例如在 flex-start 和 flex-end 之间切换justify-content。
View Transition 本质上是对包含元素屏幕截图的伪元素进行动画处理，而不是元素本身。这个过程有优点也有缺点，但最重要的是，这反过来会在视觉上冻结页面的全部或部分，使其保持静态和非交互式，直到动画完成为止。
这就是为什么 <ViewTransition /> 如此重要。它在 React 渲染周期中有它自己的hooks。因此，它可以尽可能晚地触发视图转换，同时使页面在视觉上不被冻结。

motion.dev

Revealed: React's experimental animations API - Motion Blog

React is experimenting with a new animation API based on the View Transition API. How does it work? What can it do? We reveal all in this blog post.