加购飞入（Add to Cart Fly）是什么：效果预览与 AI 设计提示词

效果预览

🛒3

轻量冲锋衣¥ 699

加入购物车

适合用在哪

商品列表/详情页的加购、收藏夹添加、任何「从 A 移动到 B」的动作。

容易踩的坑

购物车图标在视口外时仍往外飞，用户看不到落点反而困惑。
动画超过 1.2s 且期间禁止再次加购，连续购买被明显拖慢。
只靠飞入动画表示成功，没有角标或文字反馈，读屏用户无感知。

设计提示词 · Prompt

加购飞入（Add to Cart Fly）：点击时用 JS 克隆商品缩略图，定位到 fixed 层，拿到商品与购物车图标的 getBoundingClientRect()，用 Web Animations API 或 CSS 变量驱动一段 600-800ms 的位移动画：路径用两段 keyframes 模拟弧线（先向右上，再向左下），同时 scale 从 1 收到 .15。动画结束（finished Promise）后移除克隆节点、购物车角标数字 +1 并触发一次 scale 1 → 1.5 → 1 的弹跳。整个流程约 0.9s，超过 1.2s 就会觉得拖沓。

Add to Cart Fly: on click, clone the product thumbnail with JS and place it in a fixed layer, get the getBoundingClientRect() of both the product and the cart icon, and drive a 600-800ms movement animation using the Web Animations API or CSS variables: simulate an arc with two keyframe segments (first up-right, then down-left), while scale shrinks from 1 to .15. When the animation finishes (finished Promise), remove the clone, increment the cart badge number by 1, and trigger a scale 1 → 1.5 → 1 bounce. The whole flow takes about 0.9s; beyond 1.2s it feels sluggish.

常见搭配

同一页面里经常和「加购飞入」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。

产品卡片Product Card 轻提示Toast Notification 底部标签栏Bottom Tab Bar

演示 HTML 结构

<div class="s d-center">
  <div class="mi-fly">
    <div class="mi-fly__cart">🛒<i>3</i></div>
    <div class="mi-fly__ghost"></div>
    <div class="mi-fly__p">
      <b>轻量冲锋衣</b><span>¥ 699</span>
      <div class="mi-fly__btn">加入购物车</div>
    </div>
  </div>
</div>