小程序添加购物车动画css

小程序添加购物车动画可以使用CSS实现。

首先，我们可以为购物车图标设置一个动画效果，使其在添加商品到购物车时有一个弹跳效果。可以使用CSS的@keyframes和animation属性来实现，具体代码如下：

@keyframes cartAnimation {
  0% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  80% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-5px);
  }
}

.cart-icon {
  animation: cartAnimation 0.5s;
  animation-fill-mode: both;
}

上述代码定义了一个名为cartAnimation的关键帧动画，通过transform属性实现购物车图标的位移效果。然后通过将animation属性应用于购物车图标的样式类.cart-icon，指定动画的执行时间为0.5秒，同时指定其动画效果在动画执行前和执行后都保留最后一帧。

除了购物车图标的动画效果，我们还可以为添加到购物车的商品设置一个飞入效果，即从商品位置飞入到购物车的位置。可以使用CSS的动画和过渡属性来实现，具体代码如下：

.product-item {
  transition: transform 0.5s;
}

.product-item.add-to-cart {
  transform: translateX(-1000px);
  transition: transform 1s;
}

.cart-item {
  transform: translateX(1000px);
  animation: flyToCart 1s;
  animation-fill-mode: both;
}

@keyframes flyToCart {
  0% {
    transform: translateX(-1000px);
  }
  100% {
    transform: translateX(0);
  }
}

上述代码定义了两个过渡效果，一个用于.product-item，当商品被添加到购物车时，通过添加.add-to-cart类名来触发过渡效果，使商品从当前位置向左移动1000像素。另一个用于.cart-item，通过关键帧动画flyToCart将商品从左侧平移进入购物车。

在实际使用时，可以通过动态添加或移除类名来触发这些动画效果。当用户点击加入购物车按钮时，为相关元素添加相应的类名，触发动画效果即可。