vue实现移动效果

Vue 实现移动效果的常见方法

使用 CSS 过渡和动画

通过 Vue 的 <transition> 组件结合 CSS 过渡或动画实现移动效果。定义 CSS 类控制元素的位移，Vue 在元素状态变化时自动应用过渡效果。

<transition name="slide">
  <div v-if="show">滑动内容</div>
</transition>

.slide-enter-active, .slide-leave-active {
  transition: transform 0.5s ease;
}
.slide-enter-from {
  transform: translateX(100%);
}
.slide-leave-to {
  transform: translateX(-100%);
}

使用 Vue 的 JavaScript 钩子

通过 <transition> 的 JavaScript 钩子（如 @before-enter、@enter）结合 GSAP 或 Anime.js 等动画库实现复杂移动效果。

<transition
  @before-enter="beforeEnter"
  @enter="enter"
  @leave="leave"
>
  <div v-if="show">动态移动元素</div>
</transition>

methods: {
  beforeEnter(el) {
    el.style.opacity = 0;
    el.style.transform = 'translateY(50px)';
  },
  enter(el, done) {
    anime({
      targets: el,
      opacity: 1,
      translateY: 0,
      duration: 500,
      easing: 'easeInOutQuad',
      complete: done
    });
  }
}

动态绑定样式

通过 v-bind:style 动态计算样式属性（如 transform），结合 Vue 的响应式数据实现移动交互。

<div 
  :style="{
    transform: `translateX(${position.x}px) translateY(${position.y}px)`,
    transition: 'transform 0.3s ease'
  }"
  @mousedown="startDrag"
  @mousemove="drag"
  @mouseup="endDrag"
>
  可拖拽元素
</div>

data() {
  return {
    position: { x: 0, y: 0 },
    isDragging: false
  };
},
methods: {
  startDrag(e) {
    this.isDragging = true;
  },
  drag(e) {
    if (this.isDragging) {
      this.position.x += e.movementX;
      this.position.y += e.movementY;
    }
  }
}

使用第三方库

集成专用动画库如 vue-use-gesture 或 hammer.js 处理触摸和拖拽移动：

import { useDrag } from 'vue-use-gesture';

export default {
  setup() {
    const position = reactive({ x: 0, y: 0 });
    const bindDrag = useDrag(({ offset: [x, y] }) => {
      position.x = x;
      position.y = y;
    });

    return { position, bindDrag };
  }
}

<div v-bind="bindDrag()" :style="{ transform: `translate3d(${position.x}px, ${position.y}px, 0)` }">
  拖拽移动元素
</div>

性能优化建议

• 使用 transform 和 opacity 代替 top/left 属性，触发硬件加速。
• 对于复杂动画，优先使用 requestAnimationFrame 或 CSS will-change 属性。
• 移动端注意添加 touch-action: none 防止默认手势冲突。