getBoundingClientRect()需在DOM渲染后调用，推荐requestAnimationFrame/nextTick/useEffect/onReady确保元素已挂载；统一用其返回的视口坐标计算位移；抛物线y值需取负适配网页坐标系；动画必用transform:translate避免重排。
getBoundingClientRect() 必须在 DOM 渲染后调用
点击按钮瞬间，getBoundingClientRect() 返回的坐标可能不准——尤其当购物车图标是动态渲染（比如 Vue/React 组件挂载延迟、uniapp 的 onReady 未触发、或购物车 DOM 尚未插入 document）。常见现象是动画飞向页面左上角（0,0），或偏移严重。
正确做法是确保目标元素已真实渲染并可测量：
- 原生 JS：用
requestAnimationFrame(() => { /* 调用 getBoundingClientRect */ })或setTimeout(() => {}, 0) - Vue：在
nextTick回调里获取 - React：用
useEffect+ref，且确保 ref 已绑定到真实 DOM 节点 - uniapp：必须等
onReady生命周期之后再取，否则 H5 和小程序表现不一致
坐标系要注意 clientX/Y vs offsetTop/offsetLeft
别混用两种坐标系统：event.clientX 和 event.clientY 是视口坐标（含滚动偏移），而 element.offsetTop 是相对于 offsetParent 的文档坐标（不含滚动）。抛物线动画必须统一基准。
推荐全部用视口坐标（getBoundingClientRect() 返回值）：
-
getBoundingClientRect()返回的是相对于当前 viewport 的left、top，天然适配滚动页 - 起点用按钮的
btn.getBoundingClientRect() - 终点用购物车图标的
cartIcon.getBoundingClientRect() - 两者相减直接得相对位移
diffX、diffY，无需手动加window.scrollX/Y
抛物线公式里 y 轴方向要翻转
网页坐标系 y 向下为正，但数学抛物线公式 y = ax² + bx + c 默认 y 向上为正。若直接套用，小球会反向“下坠”——实际飞向屏幕下方更远，而非先升后降。
解决方法不是改公式，而是把计算出的数学 y 值取负再应用：
- 设起点为 (0, 0)，终点为 (diffX, diffY)，期望顶点高度为
h（向上偏移量） - 解出系数后，每帧计算
y_math = a * x² + b * x - 真正设置样式时用：
transform: translate(x + left0, -(y_math) + top0) - 或者更稳妥：用
translate(x, y)时，y 值直接传-y_math
动画过程中不要用 top/left 更新位置
用 top 和 left 配合 position: absolute 触发布局重排（layout thrashing），性能差、掉帧明显，尤其在低端安卓机或微信小程序里卡顿肉眼可见。
必须用 transform: translate(x, y)：
- GPU 加速，不触发重排
- 配合
scale和opacity可自然实现“飞入+缩小+淡出”效果 - 注意：起点元素需设
position: fixed或position: absolute+z-index，避免被其他元素遮挡
复杂点在于不同端对 getBoundingClientRect() 的兼容性细节——比如小程序里某些版本返回值不含 x/y 字段，只认 left/top；H5 在 zoom 缩放下也可能偏差。这些不写死坐标、不依赖 jQuery 的纯原生方案，反而最容易漏掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
