2022 年， web 前端终于可以做到元素跨页面动画了
ssshooter · ssshooter · 2022-05-14 17:43:45 +08:00 · 3050 次点击这是一个创建于 952 天前的主题，其中的信息可能已经有所发展或是发生改变。
就是原生应用很常见的那种点击列表会把缩略图带到详情的那种效果，也就是 Flutter 的 Hero animation
像这样 ↓
https://user-images.githubusercontent.com/93594/141100217-ba1fa157-cd79-4a9d-b3b4-67484d3c7dbf.mp4
完整介绍视频 ↓
https://www.youtube.com/watch?v=JCJUPJ_zDQ4
看着十分美好，然而现在还是金丝雀阪本限定，不知道这个功能普及要多久呢
 |
1
hronro 2022-05-14 17:57:18 +08:00
以前也可以用 FLIP 来做吧，只是会麻烦很多
|
 |
2
statumer 2022-05-14 18:28:56 +08:00
有点标题党，原视频小哥说的很清楚，page transition animation 和跨页面的元素共享并不是不能做，而是有一定难度。
这个 demo https://vue-starport.netlify.app/ 就是 Vue 实现跨页面动画的一个很好的展示。 |
 |
4
Archeb 2022-05-15 02:05:13 +08:00
这个新 API 好啊....当时我写我博客的不同目录分类的纵向切换过渡，光 JS 就写了几十行，要是用这个的话两下就写好了
|
 |
5
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 呢? 就是怎么阻塞住页面加载完成这个事件呢? |
|
6
yankebupt 2022-05-15 03:53:30 +08:00
好吧没认真看，可以 await
|
Select Language