嘿，我来帮你搞定这个飞入购物车的动画效果！你已经完成了图片克隆的第一步，接下来只需要给克隆图添加样式、处理飞行动画，最后定时移除就好啦，咱们一步步拆解：

1. 先准备CSS样式 #

首先得给克隆的图片定义zoom类的样式，让它能脱离文档流、有过渡动画，还能定位到原图片位置：

/* 飞入动画的样式 */
.zoom {
    position: fixed; /* 固定定位，避免页面滚动影响飞行路径 */
    z-index: 9999; /* 确保克隆图在页面最上层显示 */
    transition: all 1s ease-in-out; /* 动画时长和缓动效果，和原jQuery版保持一致 */
    pointer-events: none; /* 避免飞行中的图片遮挡页面其他可点击元素 */
}

2. 完整的原生JS实现代码 #

下面是结合你已有的克隆代码，完善后的完整逻辑，适配通用的商品列表结构：

<!-- 示例HTML结构 -->
<ul class="product-list">
    <li class="product-item">
        <img src="your-product-1.jpg" alt="商品1" class="product-img">
        <button class="add-to-cart">加入购物车</button>
    </li>
    <li class="product-item">
        <img src="your-product-2.jpg" alt="商品2" class="product-img">
        <button class="add-to-cart">加入购物车</button>
    </li>
    <!-- 更多商品项... -->
</ul>
<div class="cart" id="cart">🛒 购物车</div>

<script>
// 获取所有加入购物车按钮和购物车元素
const addToCartButtons = document.querySelectorAll('.add-to-cart');
const cart = document.getElementById('cart');

// 给每个按钮绑定点击事件
addToCartButtons.forEach(button => {
    button.addEventListener('click', function() {
        // 找到当前按钮对应的商品图片
        const productImg = this.closest('.product-item').querySelector('.product-img');
        // 克隆图片（你已经完成的核心步骤）
        const clonedImg = productImg.cloneNode(true);
        
        // 给克隆图添加zoom类，应用动画样式
        clonedImg.classList.add('zoom');
        
        // 获取原图片和购物车的视口位置信息
        const imgRect = productImg.getBoundingClientRect();
        const cartRect = cart.getBoundingClientRect();
        
        // 设置克隆图的初始位置：和原图片完全重合
        clonedImg.style.left = `${imgRect.left}px`;
        clonedImg.style.top = `${imgRect.top}px`;
        clonedImg.style.width = `${imgRect.width}px`;
        clonedImg.style.height = `${imgRect.height}px`;
        
        // 把克隆图添加到页面中
        document.body.appendChild(clonedImg);
        
        // 触发飞行动画：设置目标位置（购物车中心）
        // 使用requestAnimationFrame确保浏览器先渲染初始位置，再触发过渡动画
        requestAnimationFrame(() => {
            // 让图片飞到购物车中心，同时缩小并渐隐
            clonedImg.style.left = `${cartRect.left + cartRect.width/2 - imgRect.width/2}px`;
            clonedImg.style.top = `${cartRect.top + cartRect.height/2 - imgRect.height/2}px`;
            clonedImg.style.width = '30px';
            clonedImg.style.height = '30px';
            clonedImg.style.opacity = '0';
        });
        
        // 动画结束后移除克隆图（和原jQuery版的setTimeout逻辑一致，1秒后清理）
        setTimeout(() => {
            clonedImg.remove();
        }, 1000);
    });
});
</script>

关键细节解释 #

• 位置计算：用getBoundingClientRect()获取元素相对于视口的精准坐标，这样能保证克隆图沿着正确路径飞到购物车。
• 动画触发技巧：使用requestAnimationFrame是为了让浏览器先渲染克隆图的初始位置，再应用目标样式——如果直接连续设置样式，浏览器会合并渲染步骤，导致CSS过渡动画无法触发。
• 用户体验优化：添加pointer-events: none可以避免飞行中的图片遮挡页面其他可交互元素，提升操作流畅度。

这样实现的效果就和你参考的YouTube视频里的jQuery版本完全一致啦，而且是纯原生JS实现，不需要依赖任何第三方库。

内容的提问来源于stack exchange，提问作者Muthukumar Marichamy