用JS实现元素飞向sticky购物车动效时滚动出现位移偏差如何解决

你当前实现的核心问题是：动画终点坐标是点击瞬间计算的静态值，sticky定位的购物车在页面滚动时，相对于文档流的绝对坐标会发生变化，但已经绑定的transition终点不会同步更新，最终就会出现落点偏移。

优先使用相对于视口的固定定位做飞行动画，完全不受页面滚动影响：

• 临时飞行的图标统一用position: fixed定位，不要用absolute定位，fixed定位的坐标完全基于浏览器视口，和页面滚动无关
• 点击卡片时，通过getBoundingClientRect()分别获取被点击卡片、购物车图标的视口坐标，两者的相对位置不会随滚动改变
• 用transform代替top/left做动画属性，只会触发重绘不会触发重排，动画流畅度更高
• 过渡结束后直接移除临时飞行元素即可

代码示例 #

/* 提前写好飞行图标基础样式 */
.fly-cart-icon {
  position: fixed;
  width: 24px;
  height: 24px;
  background: url(你的购物车图标路径) center / cover no-repeat;
  z-index: 9999;
  pointer-events: none; /* 避免飞行过程中挡住页面其他交互 */
}

document.querySelectorAll('.goods-card').forEach(card => {
  card.addEventListener('click', () => {
    // 创建临时飞行元素
    const flyIcon = document.createElement('div');
    flyIcon.className = 'fly-cart-icon';
    document.body.appendChild(flyIcon);

    // 获取起点（卡片中心）、终点（购物车中心）的视口坐标
    const cardRect = card.getBoundingClientRect();
    const cartRect = document.querySelector('.sticky-cart').getBoundingClientRect();
    const startX = cardRect.left + cardRect.width / 2 - flyIcon.offsetWidth / 2;
    const startY = cardRect.top + cardRect.height / 2 - flyIcon.offsetHeight / 2;
    const endX = cartRect.left + cartRect.width / 2 - flyIcon.offsetWidth / 2;
    const endY = cartRect.top + cartRect.height / 2 - flyIcon.offsetHeight / 2;

    // 设置初始位置
    flyIcon.style.transform = `translate(${startX}px, ${startY}px) scale(1)`;
    flyIcon.style.opacity = '1';

    // 下一帧触发过渡动画
    requestAnimationFrame(() => {
      flyIcon.style.transition = 'all 2s cubic-bezier(0.25, 0.46, 0.45, 0.94)';
      flyIcon.style.transform = `translate(${endX}px, ${endY}px) scale(0.3)`;
      flyIcon.style.opacity = '0';
    });

    // 动画结束后移除元素
    flyIcon.addEventListener('transitionend', () => flyIcon.remove());
  })
})

如果受业务限制必须用absolute定位飞行元素，可以在动画运行期间监听页面scroll事件，每次滚动时重新计算购物车的绝对坐标，实时更新飞行元素的终点位置，注意添加防抖避免性能损耗。

内容的提问来源于stack exchange，提问作者Tetbirt Mohamed Hassene