☃️

视图过渡View Transitions API

CSS View Transitions API 简化了这些任务,使 Web 开发人员能够以更少的代码和更少的可访问性问题来创建流畅的视图过渡。简单地说,在 CSS View Transitions API 中,Web 开发人员只需要更新 DOM 即可创建过渡效果更加流畅的动画效果。它主要通过以下方式工作:
  • 快速切换 DOM 状态:CSS View Transitions API 可以瞬间切换 DOM 的两个状态,无需中间状态
  • 创建可自定义的过渡效果:默认情况下,CSS View Transitions API 创建一个页面级别的交叉淡入淡出效果,但 Web 开发人员可以使用 CSS 属性进行自定义,以独立控制哪些元素被捕获和独立动画处理
  • 使用伪元素:过渡状态由伪元素表示,开发人员可以使用熟悉的 CSS 动画来自定义每个过渡效果
CSS View Transitions API 允许 Web 开发者在视觉 DOM 更改状态之间添加动画过渡。这些更改可以是小的更改,比如,下图所展示的内容切换,点击加号按钮新增标签(向 DOM 中新增新元素),点击关闭按钮删除标签(从 DOM 中删除元素):