查看动画

Motion 的 animateView() 函数使在两个不同的视图或布局之间进行动画变得简单。

// Crossfade
animateView(update).enter({ opacity: 1 })

视图动画有许多独特的超能力

布局： 为布局的离散变化制作动画，例如在 "flex-start" 和 "flex-end" 之间切换 justify-content。

共享元素过渡： 跨两个视图为完全不同的元素制作动画。例如，此下划线元素像单个元素一样移动，但每个元素完全使用 CSS 在 .selected 选项卡上生成。

页面效果： 为整个视口添加效果，例如擦除、滑动和交叉淡入淡出

animateView() 构建于浏览器的原生View Transition API以实现小文件大小和出色的性能。

它的目标是消除 View Transition API 的复杂性并加以扩展

• 更简洁的 API

• 弹簧动画

• 中断处理/排队

重要提示： animateView() 目前处于 alpha 阶段，这意味着 API 可能会更改。它也是 Motion+ 会员专享Motion+ 会员，我们鼓励他们通过我们的私人 Discord 帮助我们塑造 API。

作为早期访问 API，未来还有更多功能，例如

• 自动 view-transition-name 管理

• 进入/退出动画