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

[ssshooter]

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

像这样 ↓

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

完整介绍视频 ↓

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

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

[hronro]

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

[statumer]

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

[ssshooter]

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

[Archeb]

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

[yankebupt]

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

[yankebupt]

好吧没认真看，可以 await