当前位置：首页 > VUE

vue实现共享动画

2026-01-14 07:30:51VUE

Vue 实现共享动画的方法

在 Vue 中实现共享动画（即多个元素间平滑过渡的动画效果）可以通过 Vue 的过渡系统和第三方库（如 GSAP）来实现。以下是几种常见方法：

使用 Vue 的 `<transition>` 和 `<transition-group>`

Vue 内置的 <transition> 和 <transition-group> 组件可以用于实现元素进入/离开的动画效果。通过 name 属性和 CSS 过渡类名，可以定义动画效果。

vue实现共享动画

<transition name="fade">
  <div v-if="show" class="box"></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）是一种高性能动画技术，适用于元素位置变化的平滑过渡。可以通过 Vue 的 @before-enter、@enter 等钩子实现。

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

使用 GSAP 实现复杂动画

GSAP 是一个强大的动画库，可以与 Vue 结合实现更复杂的共享动画效果。

vue实现共享动画

import gsap from 'gsap';

methods: {
  animateElement(el) {
    gsap.from(el, {
      duration: 0.5,
      opacity: 0,
      y: 20,
      ease: "power2.out"
    });
  }
}

共享元素过渡

通过 Vue 的 key 属性和状态管理（如 Vuex），可以实现共享元素在不同组件间的平滑过渡。

<transition name="shared">
  <div :key="sharedKey" class="shared-element"></div>
</transition>

.shared-enter-active, .shared-leave-active {
  transition: all 0.5s;
}
.shared-enter, .shared-leave-to {
  opacity: 0;
  transform: scale(0.8);
}

使用 Vue Router 的过渡

在页面切换时，可以通过 Vue Router 的 <router-view> 结合 <transition> 实现共享动画。

<transition name="page">
  <router-view></router-view>
</transition>

.page-enter-active, .page-leave-active {
  transition: opacity 0.3s, transform 0.3s;
}
.page-enter, .page-leave-to {
  opacity: 0;
  transform: translateX(10px);
}