Transitions.dev：让 AI 界面更有质感的动效库

是什么 这条收藏推荐 Jakub Antalik 制作的 Transitions.dev 及其 Transitions Skill。它把网页中常见但容易被忽略的 UI 转场整理成可浏览、可复制、也可交给 coding agent 使用的动效案例库。原推文的核心反馈是：将这套方法应用到一个尚未打磨的 RN 应用后，整体质感明显提升。

核心设计 案例覆盖卡片缩放、数字翻转、徽章弹入、菜单与模态框开合、图标替换、成功与错误反馈、骨架屏揭示、标签页滑动指示器、拖放、流式文本、思考状态和图片生成占位等。价值不在单个动画，而在于为常见状态变化提供可复用的交互语言，让界面反馈更连续、更有层次。

关键洞察 页面还强调动效性能：动画 mask-position 会触发重绘，若元素处于位移滤镜链中，模糊或位移效果可能每帧重新执行。将静态绘制内容覆盖在同色幕布下，再用 transform 移动幕布，可把动画移到合成路径，代价是波纹会随幕布移动。

边界与风险 这是面向 Web 的 CSS/React 资源，不能直接证明所有案例都能在 React Native 中复用。实际接入仍需检查平台动画能力、可访问性、低动态偏好，以及 blur、mask 和 3D 效果在目标设备上的性能。