vue实现页面动效

Vue 实现页面动效的方法

使用 Vue Transition 组件

Vue 内置的 <transition> 和 <transition-group> 组件可以方便地实现元素进入/离开的动画效果。通过定义 CSS 过渡类名或 JavaScript 钩子函数，可以实现多种动画效果。

<transition name="fade">
  <div v-if="show">内容</div>
</transition>

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

结合 CSS 动画库

引入第三方 CSS 动画库（如 Animate.css）可以快速实现丰富的动画效果。通过 <transition> 的 enter-active-class 和 leave-active-class 属性指定动画类名。

<transition
  enter-active-class="animate__animated animate__bounceIn"
  leave-active-class="animate__animated animate__bounceOut"
>
  <div v-if="show">内容</div>
</transition>

使用 GSAP 实现复杂动画

GSAP 是一个强大的 JavaScript 动画库，适合实现复杂的序列动画或精细控制。在 Vue 的 mounted 或方法中调用 GSAP API。

import gsap from 'gsap';

export default {
  mounted() {
    gsap.to('.box', {
      duration: 1,
      x: 100,
      rotation: 360,
      ease: 'bounce.out'
    });
  }
}

组件状态驱动的动画

利用 Vue 的响应式特性，将动画与数据绑定。通过动态修改样式或类名实现交互式动画。

<div 
  class="box" 
  :style="{ transform: `scale(${scale})` }"
  @mouseover="scale = 1.2"
  @mouseleave="scale = 1"
></div>

export default {
  data() {
    return {
      scale: 1
    }
  }
}

路由过渡动画

在 Vue Router 中使用 <transition> 包装 <router-view>，实现页面切换时的过渡效果。

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

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

使用 VueUse 动画工具

VueUse 库提供 useTransition 等组合式 API，可以轻松创建基于缓动的数值动画。

import { useTransition } from '@vueuse/core';

const output = useTransition(input, {
  duration: 1000,
  transition: [0.75, 0, 0.25, 1]
});

性能优化建议

避免使用过多 box-shadow 或 filter 属性，这些属性会触发重绘。优先使用 transform 和 opacity 实现动画，这些属性可以利用硬件加速。

对于复杂场景，考虑使用 WebGL 库（如 Three.js）或 CSS 的 will-change 属性提示浏览器优化。

.animated-element {
  will-change: transform, opacity;
}