当前位置：首页 > 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实现签约合作弹窗可以通过组件化方式完成，结合模态框和表单交互逻辑。以下是具体实现方法： 1. 创建弹窗组件新建一个Vue组件文件（如SignContractDia…

vue 实现toast

vue 实现 toast 的方法在 Vue 中实现 Toast 提示功能可以通过多种方式，以下是几种常见的实现方法：使用第三方库 Vue 生态中有许多成熟的 Toast 库，例如 vue-toa…

vue 实现全屏

Vue 实现全屏功能在 Vue 中实现全屏功能可以通过浏览器提供的 Fullscreen API 完成。以下是一个完整的实现方案：安装依赖（可选）如果需要跨浏览器兼容性更好，可以安装 scre…

vue滑块实现

Vue滑块实现方法使用原生HTML5 range input Vue中可以绑定原生HTML5的range类型input元素实现基础滑块功能： <template> <div&…

vue实现页面

Vue 实现页面的基本方法创建 Vue 项目使用 Vue CLI 快速初始化项目，运行以下命令安装并创建项目： npm install -g @vue/cli vue create my-pro…

vue实现tooltips

Vue 实现 Tooltips 的方法使用原生 HTML title 属性在 Vue 模板中直接使用 HTML 原生 title 属性实现简单的提示效果。这种方式无需额外依赖，但功能较为基础，无法…

vue实现回弹效果