js购物车动画效果

<div class="product" id="product1">
  <img src="product1.jpg" alt="Product 1">
  <button class="add-to-cart">Add to Cart</button>
</div>
<div class="cart" id="cart">
  <span class="cart-count" id="cart-count">0</span>
</div>

.product {
  position: relative;
  display: inline-block;
}

.cart {
  position: fixed;
  top: 20px;
  right: 20px;
}

.cart-count {
  display: inline-block;
  padding: 5px 10px;
  background-color: red;
  color: white;
  border-radius: 50%;
}

document.querySelector('.add-to-cart').addEventListener('click', function() {
  const product = document.getElementById('product1');
  const cart = document.getElementById('cart');
  const cartCount = document.getElementById('cart-count');

  // 创建一个克隆的商品元素用于动画
  const clone = product.cloneNode(true);
  clone.style.position = 'absolute';
  clone.style.top = product.offsetTop + 'px';
  clone.style.left = product.offsetLeft + 'px';
  document.body.appendChild(clone);

  // 计算动画的起始和结束位置
  const startX = clone.offsetLeft;
  const startY = clone.offsetTop;
  const endX = cart.offsetLeft + cart.offsetWidth / 2 - clone.offsetWidth / 2;
  const endY = cart.offsetTop + cart.offsetHeight / 2 - clone.offsetHeight / 2;

  // 设置动画的最终状态
  clone.style.transform = `translate(${endX - startX}px, ${endY - startY}px)`;

  // 使用CSS过渡实现动画
  clone.style.transition = 'transform 1s ease-in-out';

  // 动画结束后移除克隆元素并更新购物车数量
  clone.addEventListener('transitionend', function() {
    clone.remove();
    cartCount.textContent = parseInt(cartCount.textContent) + 1;
  });
});