当前位置：首页 > VUE

vue实现回弹效果

2026-02-20 01:13:40VUE

Vue 实现回弹效果的方法

回弹效果（Bounce Effect）常见于移动端交互，可以通过 CSS 动画或第三方库实现。以下是几种实现方式：

使用 CSS 动画

通过 Vue 绑定样式或类名，结合 CSS @keyframes 或 transition 实现回弹效果。

<template>
  <div 
    class="box" 
    :style="{ transform: bounceScale }"
    @click="startBounce"
  >
    点击回弹
  </div>
</template>

<script>
export default {
  data() {
    return {
      bounceScale: 'scale(1)'
    }
  },
  methods: {
    startBounce() {
      this.bounceScale = 'scale(1.2)'
      setTimeout(() => {
        this.bounceScale = 'scale(0.9)'
      }, 150)
      setTimeout(() => {
        this.bounceScale = 'scale(1)'
      }, 300)
    }
  }
}
</script>

<style>
.box {
  width: 100px;
  height: 100px;
  background: #42b983;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
</style>

使用 GreenSock (GSAP)

GSAP 提供更强大的动画控制，适合复杂回弹效果。

<template>
  <div ref="box" class="box" @click="bounce">
    点击回弹
  </div>
</template>

<script>
import { gsap } from 'gsap'

export default {
  methods: {
    bounce() {
      gsap.to(this.$refs.box, {
        scale: 1.2,
        duration: 0.2,
        yoyo: true,
        repeat: 1,
        ease: "bounce.out"
      })
    }
  }
}
</script>

使用 Vue Transition

Vue 的 <transition> 组件结合 CSS 实现入场/离场回弹。

<template>
  <button @click="show = !show">切换</button>
  <transition name="bounce">
    <div v-if="show" class="box">回弹内容</div>
  </transition>
</template>

<style>
.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.25); }
  100% { transform: scale(1); }
}
</style>