当前位置：首页 > 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 Router 是 Vue.js 的官方路由管理器，用于构建单页面应用（SPA）。以下是实现 Vue 路由的详细步骤：安装 Vue Router 通过 npm 或 ya…

vue实现详情

Vue 实现详情页的常见方法使用动态路由在 Vue Router 中配置动态路由参数，通过 $route.params 获取详情 ID。示例路由配置： { path: '/detail/:i…

vue 实现流程

Vue 实现流程 Vue.js 是一个渐进式 JavaScript 框架，用于构建用户界面。以下是 Vue 实现的基本流程：安装 Vue.js 通过 CDN 引入或使用 npm/yarn 安装：…

vue实现swiper

Vue 中实现 Swiper 的方法安装 Swiper 依赖在 Vue 项目中安装 Swiper 和相关依赖： npm install swiper vue-awesome-swiper 全局引…

vue实现日历

Vue 实现日历的基本方法使用 Vue 实现日历可以通过自定义组件或借助第三方库完成。以下是两种常见实现方式：自定义日历组件创建基于 Vue 的日历组件需要处理日期计算和渲染逻辑。核心是生成当…

vue实现列表

Vue 实现列表的方法在 Vue 中实现列表渲染通常使用 v-for 指令，可以动态生成多个元素。以下是几种常见的实现方式：基础列表渲染使用 v-for 遍历数组，生成列表项。v-for 需要…

vue实现回弹效果