vue实现位置的过渡

Vue 过渡动画实现位置变化

Vue 提供了 <transition> 和 <transition-group> 组件来处理元素位置变化的过渡效果。以下是几种常见实现方式：

使用 CSS 过渡

通过 Vue 的 <transition> 组件结合 CSS 的 transition 属性实现平滑移动：

<transition name="move">
  <div v-if="show" class="box"></div>
</transition>

.move-enter-active, .move-leave-active {
  transition: all 0.5s ease;
}
.move-enter-from {
  transform: translateX(100px);
  opacity: 0;
}
.move-leave-to {
  transform: translateX(-100px);
  opacity: 0;
}

使用动画库

引入第三方动画库如 Animate.css 实现复杂位置动画：

<transition
  enter-active-class="animate__animated animate__slideInRight"
  leave-active-class="animate__animated animate__slideOutLeft"
>
  <div v-if="show">滑动元素</div>
</transition>

列表元素位置变化

使用 <transition-group> 处理动态列表中的位置变化：

<transition-group name="list" tag="ul">
  <li v-for="item in items" :key="item.id">
    {{ item.text }}
  </li>
</transition-group>

.list-move {
  transition: transform 0.8s ease;
}

JavaScript 钩子

通过 JavaScript 钩子实现更复杂的定位逻辑：

<transition
  @before-enter="beforeEnter"
  @enter="enter"
  @leave="leave"
>
  <div v-if="show"></div>
</transition>

methods: {
  beforeEnter(el) {
    el.style.transform = 'translateY(100px)';
  },
  enter(el, done) {
    gsap.to(el, {
      y: 0,
      duration: 0.5,
      onComplete: done
    });
  }
}

FLIP 动画技术

对于高性能的位置变化动画，可以使用 FLIP 技术：

function moveElement(el, targetPos) {
  const first = el.getBoundingClientRect();
  el.style.transform = `translate(${targetPos.x}px, ${targetPos.y}px)`;
  const last = el.getBoundingClientRect();
  const invert = {
    x: first.left - last.left,
    y: first.top - last.top
  };
  el.style.transition = 'none';
  el.style.transform = `translate(${invert.x}px, ${invert.y}px)`;
  requestAnimationFrame(() => {
    el.style.transition = 'transform 0.5s';
    el.style.transform = '';
  });
}

这些方法可以根据具体场景选择使用，CSS 过渡适合简单动画，JavaScript 钩子适合复杂交互，FLIP 技术适合高性能要求的场景。