用js实现购物车特效

<div class="product" id="product">
  <img src="product.jpg" alt="Product Image">
  <button onclick="addToCart()">Add to Cart</button>
</div>
<div class="cart" id="cart">
  <span>Cart</span>
</div>

.product img {
  width: 100px;
  height: 100px;
}
.cart {
  position: fixed;
  top: 10px;
  right: 10px;
  width: 50px;
  height: 50px;
  background-color: #ccc;
}
.flyItem {
  position: absolute;
  transition: all 0.5s ease;
}

function addToCart() {
  const product = document.getElementById('product');
  const cart = document.getElementById('cart');

  // 创建一个商品的副本用于动画
  const flyItem = product.cloneNode(true);
  flyItem.classList.add('flyItem');
  flyItem.style.left = `${product.offsetLeft}px`;
  flyItem.style.top = `${product.offsetTop}px`;
  document.body.appendChild(flyItem);

  // 计算飞入购物车的路径
  const cartRect = cart.getBoundingClientRect();
  const productRect = product.getBoundingClientRect();
  const x = cartRect.left - productRect.left;
  const y = cartRect.top - productRect.top;

  // 设置飞入动画的目标位置
  flyItem.style.transform = `translate(${x}px, ${y}px)`;

  // 动画结束后移除元素
  flyItem.addEventListener('transitionend', () => {
    document.body.removeChild(flyItem);
  });
}