2022 年， web 前端终于可以做到元素跨页面动画了

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 909 天前的主题，其中的信息可能已经有所发展或是发生改变。

就是原生应用很常见的那种点击列表会把缩略图带到详情的那种效果，也就是 Flutter 的 Hero animation

像这样 ↓

https://user-images.githubusercontent.com/93594/141100217-ba1fa157-cd79-4a9d-b3b4-67484d3c7dbf.mp4

完整介绍视频 ↓

https://www.youtube.com/watch?v=JCJUPJ_zDQ4

看着十分美好，然而现在还是金丝雀阪本限定，不知道这个功能普及要多久呢

雀阪本

缩略图

flutter

animation

6 条回复 • 2022-05-15 03:53:30 +08:00

hronro

2022-05-14 17:57:18 +08:00

以前也可以用 FLIP 来做吧，只是会麻烦很多

statumer

2022-05-14 18:28:56 +08:00

有点标题党，原视频小哥说的很清楚，page transition animation 和跨页面的元素共享并不是不能做，而是有一定难度。
这个 demo https://vue-starport.netlify.app/ 就是 Vue 实现跨页面动画的一个很好的展示。

ssshooter

2022-05-14 19:38:46 +08:00

@statumer 这个功能的完全体是 MPA 也能用的，真正的“跨页面”

Archeb

2022-05-15 02:05:13 +08:00

这个新 API 好啊....当时我写我博客的不同目录分类的纵向切换过渡，光 JS 就写了几十行，要是用这个的话两下就写好了

yankebupt

2022-05-15 03:47:12 +08:00

问个有点得寸进尺的小问题...
我 transition 过去的那个页面的图是开了个空 div 用
d3.json("somejson.php").then(function(data))
{
...
d3.select("div#container").node().append(chart);
}
后画出来的，虽然近乎实时但是也有几百 ms ，直接 transition 过去会是个空白页面，怎么 hold 住页面让它画完再 transition 呢?
就是怎么阻塞住页面加载完成这个事件呢?

yankebupt

2022-05-15 03:53:30 +08:00

好吧没认真看，可以 await