vue实现共享动画

Vue 实现共享动画的方法

共享动画（Shared Element Transition）通常用于在不同视图间平滑过渡相同元素，常见于页面跳转或组件切换场景。以下是几种 Vue 中的实现方案：

使用 Vue Transition 组件

通过 Vue 内置的 <transition> 或 <transition-group> 实现基础动画效果：

<transition name="fade">
  <div v-if="show" class="shared-element" key="shared"></div>
</transition>

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

结合 FLIP 动画技术

FLIP（First, Last, Invert, Play）技术通过记录元素初始和最终状态，实现高性能动画：

// 记录初始位置
function getPosition(el) {
  return el.getBoundingClientRect();
}

// 应用 FLIP 动画
function applyFlip({ prevPos, currentPos, el }) {
  const dx = prevPos.left - currentPos.left;
  const dy = prevPos.top - currentPos.top;
  el.style.transform = `translate(${dx}px, ${dy}px)`;
  requestAnimationFrame(() => {
    el.style.transition = 'transform 0.5s';
    el.style.transform = '';
  });
}

使用 Vue Router 过渡

在路由切换时共享元素：

<router-view v-slot="{ Component }">
  <transition name="shared" mode="out-in">
    <component :is="Component" :key="$route.path" />
  </transition>
</router-view>

第三方库实现

1. vue-shared-element
   专为 Vue 设计的共享动画库：

   

   import { createSharedElementDirective } from 'vue-shared-element';
   const vSharedElement = createSharedElementDirective();

2. vue-overlay
   适用于模态框等场景的共享过渡效果。

3. GSAP + Vue
   通过 GSAP 实现复杂动画序列：

   gsap.fromTo(el, 
     { x: 0, opacity: 1 },
     { x: 100, opacity: 0.5, duration: 1 }
   );

状态管理同步

通过 Vuex 或 Pinia 管理共享元素状态：

// store.js
state: {
  sharedElement: null
},
mutations: {
  setSharedElement(state, payload) {
    state.sharedElement = payload;
  }
}

性能优化建议

• 使用 will-change CSS 属性提升动画性能
• 避免同时触发过多动画
• 对复杂动画使用 requestAnimationFrame
• 移动端优先考虑硬件加速（如 transform: translateZ(0)）

根据具体场景选择合适方案，简单过渡可使用原生 Vue 特性，复杂场景建议结合 FLIP 或专业动画库。