vue实现购物车动画

Vue 实现购物车动画的方法

在 Vue 中实现购物车动画通常涉及添加商品时的飞入效果。可以通过 CSS 过渡、动画库或 JavaScript 实现。以下是几种常见方法：

使用 CSS 过渡和 Vue 的 <transition> 组件

Vue 的 <transition> 组件可以方便地实现元素进入/离开的动画效果。结合 CSS 的 transform 和 transition 属性，可以实现商品飞入购物车的动画。

<template>
  <div>
    <button @click="addToCart">加入购物车</button>
    <transition name="fly">
      <div v-if="showAnimation" class="fly-item"></div>
    </transition>
    <div class="cart">购物车</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showAnimation: false
    }
  },
  methods: {
    addToCart() {
      this.showAnimation = true
      setTimeout(() => {
        this.showAnimation = false
      }, 1000)
    }
  }
}
</script>

<style>
.fly-item {
  position: fixed;
  width: 20px;
  height: 20px;
  background-color: red;
  border-radius: 50%;
}

.fly-enter-active {
  animation: fly 1s ease-in;
}

@keyframes fly {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(100px, -100px);
  }
}
</style>

使用 GSAP 动画库

GSAP 是一个强大的 JavaScript 动画库，可以实现更复杂的动画效果。

<template>
  <div>
    <button @click="addToCart">加入购物车</button>
    <div ref="flyItem" class="fly-item" v-show="false"></div>
    <div class="cart" ref="cart">购物车</div>
  </div>
</template>

<script>
import { gsap } from 'gsap'

export default {
  methods: {
    addToCart() {
      const flyItem = this.$refs.flyItem
      const cart = this.$refs.cart

      flyItem.style.display = 'block'
      const rect = cart.getBoundingClientRect()

      gsap.to(flyItem, {
        x: rect.left,
        y: rect.top,
        duration: 1,
        onComplete: () => {
          flyItem.style.display = 'none'
        }
      })
    }
  }
}
</script>

使用 Vue 的 JavaScript 钩子

Vue 的 <transition> 组件提供了 JavaScript 钩子，可以更精细地控制动画。

<template>
  <div>
    <button @click="addToCart">加入购物车</button>
    <transition
      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter"
    >
      <div v-if="showAnimation" class="fly-item"></div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showAnimation: false
    }
  },
  methods: {
    addToCart() {
      this.showAnimation = true
    },
    beforeEnter(el) {
      el.style.transform = 'translate(0, 0)'
    },
    enter(el, done) {
      const animation = el.animate([
        { transform: 'translate(0, 0)' },
        { transform: 'translate(100px, -100px)' }
      ], {
        duration: 1000
      })

      animation.onfinish = done
    },
    afterEnter(el) {
      this.showAnimation = false
    }
  }
}
</script>

实现购物车计数动画

除了商品飞入效果，还可以为购物车数量添加动画：

<template>
  <div>
    <button @click="addToCart">加入购物车</button>
    <div class="cart">
      购物车 <span class="count" :class="{ 'bounce': isBouncing }">{{ count }}</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
      isBouncing: false
    }
  },
  methods: {
    addToCart() {
      this.count++
      this.isBouncing = true
      setTimeout(() => {
        this.isBouncing = false
      }, 500)
    }
  }
}
</script>

<style>
.count {
  display: inline-block;
}

.bounce {
  animation: bounce 0.5s;
}

@keyframes bounce {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
}
</style>

使用第三方库如 animate.css

结合 animate.css 可以快速实现各种预设动画效果。

<template>
  <div>
    <button @click="addToCart">加入购物车</button>
    <transition
      enter-active-class="animate__animated animate__bounceIn"
      leave-active-class="animate__animated animate__bounceOut"
    >
      <div v-if="showAnimation" class="fly-item"></div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showAnimation: false
    }
  },
  methods: {
    addToCart() {
      this.showAnimation = true
      setTimeout(() => {
        this.showAnimation = false
      }, 1000)
    }
  }
}
</script>

以上方法可以根据实际需求选择或组合使用，实现不同风格的购物车动画效果。