告别FLIP动画:View Transition API带来的革命性变革

前端动画发展这么多年了,transition、animation等,但他们都有一个问题,就是页面元素结构发生变化时,无法应用动画。所以就有了FLIP动画,它可以在页面元素结构发生变化时,应用动画。

FLIP动画: 曾经的王者

FLIP是First, Last, Invert, Play的缩写,它是一种动画效果,它的核心思想是:在元素结构发生变化时,先记录元素的初始状态,然后记录元素的最终状态,然后计算出元素的变化量,最后应用这些变化量,就可以实现动画效果。

  1. First : 记录元素的当前状态(位置、大小)
  2. Last : 修改元素,记录元素的最终状态(位置、大小)
  3. Invert : 计算元素的变化量, 并通过transform将元素恢复到初始状态
  4. Play : 对transform应用动画,将元素移动到最终状态

这种方式被广泛应用于拖拽, 列表重排等场景中。但是它太麻烦了。需要手动计算元素初始及结束状态,及变化量,然后应用到元素上。

View Transition API: 革命性的变革

View Transition API是一种新的API,它可以在页面元素结构发生变化时,通过动画的方式完成变化

javascript 复制代码
document.startViewTransition(() => {
  // 这里是修改页面元素的代码
  // 比如更新DOM,调整元素位置等
});

只需要将DOM变更的代码放在startViewTransition的回调函数中,就可以实现动画效果了。浏览器会自动:

  • 捕获前后状态
  • 自动为旧视图和新视图创建snapshot
  • 管理动画过程

使用这个新的api你只需要专注于我想改什么, 不再关注怎么应用动画

CSS

View Transition API 还有配套的CSS属性,用于控制动画效果,主要有以下几个属性:

::view-transition, ::view-transition-old, ::view-transition-new, ::view-transition-group, ::view-transition-image-pair

兼容性

除了Firefox, 主流现代浏览器都已经支持了


曾经我们用FLIP实现流畅的动画效果,是因为浏览器不给力。今天,浏览器已经足够给力,是时候说一句

再见,FLIP。你好,View Transition API。

相关推荐
孤水寒月1 小时前
给自己网站增加一个免费的AI助手,纯HTML
前端·人工智能·html
CoderLiu1 小时前
用这个MCP,只给大模型一个figma链接就能直接导出图片,还能自动压缩上传?
前端·llm·mcp
伍哥的传说1 小时前
鸿蒙系统(HarmonyOS)应用开发之实现电子签名效果
开发语言·前端·华为·harmonyos·鸿蒙·鸿蒙系统
海的诗篇_2 小时前
前端开发面试题总结-原生小程序部分
前端·javascript·面试·小程序·vue·html
uncleTom6662 小时前
前端地图可视化的新宠儿:Cesium 地图封装实践
前端
lemonzoey2 小时前
无缝集成 gemini-cli 的 vscode 插件:shenma
前端·人工智能
老家的回忆2 小时前
jsPDF和html2canvas生成pdf,组件用的elementplus,亲测30多页,20s实现
前端·vue.js·pdf·html2canvas·jspdf
半点寒12W2 小时前
uniapp全局状态管理实现方案
前端
Vertira2 小时前
pdf 合并 python实现(已解决)
前端·python·pdf
PeterJXL3 小时前
Chrome 下载文件时总是提示“已阻止不安全的下载”的解决方案
前端·chrome·安全