术语 · 动效图鉴

共享元素转场

Shared Element

点开卡片时，卡片里的图片直接「飞」到详情页的大图位置。

点一张模板卡片，再点返回；你不动时，会有一只鼠标自动演示

时长0.45 秒

手感

其他内容

跟 AI 这么说

点击卡片打开详情时，卡片里的封面图从原来的位置和大小平滑放大到详情页顶部的大图位置，时长 0.45 秒，先快后慢（ease-out）；详情页其他内容在封面到位后淡入。返回时封面图沿原路缩回卡片。可以用 View Transitions API 的 view-transition-name 实现。

常用在卡片

前后两个画面里必须是「同一张图」，比例也要接近。卡片里是方图、详情里是宽图，飞过去时会被拉伸变形，反而显得粗糙。