React实现商品添加购物车动画（小圆点飞向购物车）

1、效果图

CPT2209011354-558x647.gif

2、首先第一步，计算出Add To Cart的Button距离顶部购物车的X轴距离和Y轴距离。动态添加keyframes。 (Add To Cart Function Code)

思路：首先X轴，求的是按钮到购物车的X轴距离，那么我们就求购物车按钮距离左边的距离 + 自身的宽度，就是购物车在页面距left的距离，然后就计算出Add To Cart距离左边的距离 + 自身的宽度，然后相减。就得到按钮到购物车的X轴距离。

Y轴，按钮到购物车Y轴距离，因为需要从下到上，所以是购物车到顶端的距离 - Add To Cart到顶部的距离。

const eleBtn = document.getElementById(`btnCart-${productId}`);
const eleCart = document.querySelector('#shopCart');
var boundBtn = eleBtn!.getBoundingClientRect();
var boundCart = eleCart!.getBoundingClientRect();
var offsetY = boundCart.top + boundCart.height - (boundBtn.top + boundBtn.height);
var offsetX = boundCart.left + boundCart.width - (boundBtn.left + boundBtn.width);
    const keyXFrames = `
        @keyframes yAxis {
            100% {
              transform: translateY(${offsetY}px);
            }
         }
         @keyframes xAxis {
            100% {
                transform: translateX(${offsetX}px);
            }
        }
        `;
const style = document.createElement('style');
style.innerHTML = keyXFrames;
document.getElementsByTagName('head')[0].appendChild(style);
eleBtn?.classList.add('sendtocart');
setTimeout(function () {
    eleBtn?.classList.remove('sendtocart');
    eleCart?.classList.add('shake');
    setTimeout(function () {
        eleCart?.classList.remove('shake');
    }, 500);
}, 1000);

3、CSS & HTML（Add To Cart Button）

Add To Cart Button样式，其实就是给button设置了相对定位，然后给购物数量父类加上绝对定位，子类number为购物数量的显示，调到Button右上角。
最主要的是下面sendtocart样式，给购物数量父类加上animation（X轴动画），给子类number加上animation（Y轴动画）

.add-to-cart-button {
    position: relative;
    .cart-item {
        position: absolute;
        top: -10px;
        right: -10px;
        &-number {
            height: 24px;
            width: 24px;
            font-size: 12px;
            background: #2bd156;
            color: white;
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }

    &.sendtocart {
        .cart-item {
            display: block;
            animation: xAxis 1s forwards cubic-bezier(1, 0.44, 0.84, 0.165);
            &-number{
                animation: yAxis 1s alternate forwards cubic-bezier(0.165, 0.84, 0.44, 1);
            }
        }
    }
}

<div id={`btnCart-${productId}`} className='add-to-cart-button'>
      <PrimaryButton className='w-44' onClick={() => addToCart()}>
          <span className='font-bold'>Add To Cart</span>
          <span className='cart-item'>
              <span className='cart-item-number'>2</span>
          </span>
      </PrimaryButton>
</div>

4、CSS & HTML（Shopping Cart）

.shopping-cart-group {
    &.shake {
        animation: shakeCart 0.4s ease-in-out forwards;
    }
}

@keyframes shakeCart {
    25% {
        transform: translateX(6px);
    }

    50% {
        transform: translateX(-4px);
    }

    75% {
        transform: translateX(2px);
    }

    100% {
        transform: translateX(0);
    }
}

<div id='shopCart' className='shopping-cart-group relative ml-4 text-[#E71316]'>
    <img src={ShoppingCart.src} className='cursor-pointer' onClick={() => router.push('/order/shoppingCart')} />
    <span className='absolute top-[-1rem] left-[0.7rem]'>7</span>
</div>