vue实现购物车动画

Vue 实现购物车动画的方法

使用 Vue Transition 组件实现基础动画

Vue 的 <transition> 组件可以轻松实现元素进入/离开的动画效果。定义一个简单的飞入动画：

<transition 
  @before-enter="beforeEnter"
  @enter="enter"
  @after-enter="afterEnter">
  <div v-if="showCartItem" class="cart-item"></div>
</transition>

methods: {
  beforeEnter(el) {
    el.style.transform = 'translateY(-100px)';
    el.style.opacity = '0';
  },
  enter(el, done) {
    const animation = el.animate([
      { transform: 'translateY(-100px)', opacity: 0 },
      { transform: 'translateY(0)', opacity: 1 }
    ], {
      duration: 500
    });
    animation.onfinish = done;
  },
  afterEnter(el) {
    el.style.transform = '';
    el.style.opacity = '';
  }
}

使用 CSS 动画实现抛物线效果

抛物线动画可以通过 CSS 关键帧实现：

@keyframes fly {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  50% {
    transform: translate(var(--x), var(--y)) scale(0.5);
    opacity: 0.8;
  }
  100% {
    transform: translate(var(--endX), var(--endY)) scale(0.1);
    opacity: 0;
  }
}

.fly-item {
  position: fixed;
  z-index: 999;
  animation: fly 0.8s cubic-bezier(0.42, 0, 0.58, 1);
}

结合 Vue 和 GSAP 实现高级动画

GSAP 提供了更强大的动画控制能力：

import gsap from 'gsap';

methods: {
  addToCart(item) {
    const clone = this.$refs[`item-${item.id}`].cloneNode(true);
    document.body.appendChild(clone);

    gsap.to(clone, {
      x: this.getCartPosition().x,
      y: this.getCartPosition().y,
      scale: 0.5,
      duration: 0.8,
      ease: "power2.out",
      onComplete: () => {
        document.body.removeChild(clone);
        this.cartItems.push(item);
      }
    });
  }
}

实现购物车数量变化动画

购物车图标上的数字变化可以添加动画：

<transition name="bounce" mode="out-in">
  <span :key="cartCount" class="badge">{{ cartCount }}</span>
</transition>

.bounce-enter-active {
  animation: bounce-in 0.5s;
}
.bounce-leave-active {
  animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

优化性能的注意事项

频繁的 DOM 操作会影响性能，应该尽量减少直接操作 DOM。使用 Vue 的虚拟 DOM 和列表渲染优化：

<transition-group name="list" tag="div">
  <div v-for="item in cartItems" :key="item.id" class="cart-item">
    {{ item.name }}
  </div>
</transition-group>

.list-enter-active, .list-leave-active {
  transition: all 0.5s;
}
.list-enter, .list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}