vue负责动画实现

Vue 动画实现方法

Vue 提供了多种方式来实现动画效果，主要依赖于内置的过渡系统和第三方动画库。

内置过渡系统

Vue 的 <transition> 和 <transition-group> 组件可用于元素进入/离开的动画：

<transition name="fade">
  <p v-if="show">Hello</p>
</transition>

对应的 CSS 过渡样式：

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

JavaScript 钩子

可以通过 JavaScript 钩子实现更复杂的动画：

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

对应的 JavaScript 方法：

methods: {
  beforeEnter(el) {
    el.style.opacity = 0
  },
  enter(el, done) {
    anime({
      targets: el,
      opacity: 1,
      duration: 1000,
      complete: done
    })
  }
}

第三方动画库

可以集成流行的动画库如 GSAP 或 Anime.js：

import gsap from 'gsap'

export default {
  methods: {
    enter(el, done) {
      gsap.from(el, {
        opacity: 0,
        duration: 1,
        onComplete: done
      })
    }
  }
}

列表过渡

使用 <transition-group> 实现列表动画：

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

状态动画

通过数据变化驱动动画：

export default {
  data() {
    return {
      animatedNumber: 0
    }
  },
  watch: {
    number(newVal) {
      gsap.to(this, {
        duration: 1,
        animatedNumber: newVal
      })
    }
  }
}

路由过渡

为路由切换添加动画效果：

<router-view v-slot="{ Component }">
  <transition name="fade" mode="out-in">
    <component :is="Component" />
  </transition>
</router-view>

这些方法可以根据项目需求单独使用或组合使用，Vue 的动画系统既支持简单的 CSS 过渡，也支持复杂的 JavaScript 动画。