这个效果是怎么做出来的
业界标准解法是 FLIP 四步：First，点击时先测量卡片当前位置和尺寸；Last，直接把卡片摆到全屏详情的终态；Invert，用 transform 把它反向缩放回起点，让画面看起来没变；Play，最后把 transform 过渡到零。观众看到的就是卡片从原位连续长成详情页，中间没有任何一次跳变。
有两个容易踩的坑。第一，位置和尺寸千万不要直接改 left/top/width/height 去过渡——每帧都会触发重排，手机上肉眼可见掉帧；全部用 transform 的 translate 和 scale，走 GPU 合成层。第二，容器放大 N 倍时里面的文字会被拉变形，解决办法是给内容层做反向补偿：scale(1/N)，两个缩放相乘正好等于 1，文字全程保持原样。圆角也要同步从小圆角过渡到直角，否则放大会把圆角拉成椭圆。
怎么用这条提示词
适合列表到详情的任何场景：图片卡片、商品卡、消息气泡。发给 AI 时给它你的列表项结构，让它把 FLIP 逻辑封装成一个通用函数。如果详情页内容需要异步加载，让 AI 在动画开始后再填充内容，用户感知到的是丝滑展开而不是白屏等待。
想效果更好？试试这些
过渡时长 350 到 450 毫秒最舒服，曲线用标准缓出（cubic-bezier(0.22, 1, 0.36, 1)）。背景遮罩的淡入和卡片缩放同时进行，关闭时遮罩延迟 100 毫秒再消失，层次更干净。列表页在动画期间要禁止滚动，避免中途容器位置变了穿帮。最后用 chrome 的性能面板确认动画期间没有紫色 Layout 条，有的话说明还有布局属性没改干净。