当前位置：首页 > VUE

vue实现回弹效果

2026-01-19 08:51:44VUE

Vue 实现回弹效果的方法

回弹效果（Bounce Effect）常见于移动端交互，可以通过 CSS 动画或 JavaScript 实现。以下是几种在 Vue 中实现回弹效果的方案：

使用 CSS 动画实现基础回弹

通过 @keyframes 定义回弹动画，结合 Vue 的 v-bind:class 或 v-bind:style 动态触发动画。

<template>
  <div 
    class="box" 
    @click="toggleBounce" 
    :class="{ 'bounce': isBouncing }"
  >
    点击回弹
  </div>
</template>

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

<style>
.box {
  width: 100px;
  height: 100px;
  background: #42b983;
  transition: transform 0.3s;
}
.bounce {
  animation: bounce 0.5s;
}
@keyframes bounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}
</style>

使用第三方库（如 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, {
        y: -20,
        duration: 0.3,
        ease: "bounce.out",
        yoyo: true,
        repeat: 1
      });
    }
  }
};
</script>

结合 Touch 事件实现拖拽回弹

适用于可拖拽元素释放后的回弹效果。

<template>
  <div 
    ref="draggable"
    class="draggable"
    @touchstart="startDrag"
    @touchmove="onDrag"
    @touchend="endDrag"
  ></div>
</template>

<script>
export default {
  data() {
    return { startY: 0, currentY: 0, isDragging: false };
  },
  methods: {
    startDrag(e) {
      this.startY = e.touches[0].clientY;
      this.isDragging = true;
    },
    onDrag(e) {
      if (!this.isDragging) return;
      this.currentY = e.touches[0].clientY - this.startY;
      this.$refs.draggable.style.transform = `translateY(${this.currentY}px)`;
    },
    endDrag() {
      this.isDragging = false;
      this.$refs.draggable.style.transition = 'transform 0.5s ease-out';
      this.$refs.draggable.style.transform = 'translateY(0)';
      setTimeout(() => {
        this.$refs.draggable.style.transition = '';
      }, 500);
    }
  }
};
</script>

动态调整贝塞尔曲线

通过 cubic-bezier 自定义回弹动画曲线。

vue实现回弹效果

.bounce-effect {
  transition: transform 0.6s cubic-bezier(0.68, -0.6, 0.32, 1.6);
}
.bounce-effect:active {
  transform: scale(0.9);
}

注意事项

性能优化：避免频繁触发重排（如修改 width/height），优先使用 transform 和 opacity。
移动端适配：使用 touch 事件替代 click 以减少延迟。
动画重置：通过 setTimeout 或 transitionend 事件重置动画状态。

标签: 效果 vue

分享给朋友：

vue 指令实现

Vue 指令实现 Vue 指令是 Vue.js 提供的特殊属性，用于在 DOM 元素上添加特殊行为。指令以 v- 前缀开头，例如 v-model、v-if、v-for 等。以下是实现自定义指令和常用内…

vue 实现关闭

Vue 实现关闭功能的方法在Vue中实现关闭功能通常涉及组件销毁、模态框隐藏或路由跳转等场景。以下是几种常见实现方式：销毁当前组件使用v-if或v-show控制组件显示/隐藏，适用于局部组件：…

vue能实现

Vue.js 是一个流行的前端框架，能够实现多种功能。以下是 Vue 能够实现的主要功能和特性：响应式数据绑定 Vue 的核心特性之一是响应式数据绑定。通过数据驱动视图，当数据发生变化时，视图会自…

vue轮询实现

Vue 轮询实现方法在 Vue 中实现轮询可以通过以下几种方式：使用 setInterval data() { return { pollInterval: null } },…

vue实现fullpage

Vue 实现 FullPage 效果在 Vue 中实现全屏滚动（FullPage）效果可以通过多种方式完成，以下是几种常见的方法：使用现有库 vue-fullpage.js 安装 vue-ful…

vue 实现滑动

Vue 实现滑动效果的方法在Vue中实现滑动效果可以通过多种方式，以下是几种常见的方法：使用CSS过渡和动画通过Vue的<transition>组件结合CSS过渡或动画实现滑动效果…

vue实现回弹效果