vue实现动画

Vue 实现动画的方法

Vue 提供了多种方式来实现动画效果，包括内置的过渡系统、第三方动画库以及直接操作 CSS 或 JavaScript 动画。

使用 Vue 内置过渡系统

Vue 的 <transition> 和 <transition-group> 组件可以方便地添加进入/离开动画。通过定义 CSS 过渡类名或 JavaScript 钩子实现动画效果。

<transition name="fade">
  <p v-if="show">淡入淡出的文本</p>
</transition>

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

使用 CSS 动画库

可以结合 Animate.css 等 CSS 动画库快速实现动画效果。直接在 <transition> 组件中指定动画类名。

<transition
  enter-active-class="animate__animated animate__bounceIn"
  leave-active-class="animate__animated animate__bounceOut"
>
  <p v-if="show">使用 Animate.css 的动画</p>
</transition>

使用 JavaScript 动画库

对于更复杂的动画，可以使用 GSAP 或 anime.js 等 JavaScript 动画库。在 Vue 的过渡 JavaScript 钩子中调用这些库的方法。

<transition
  @enter="enterEl"
  @leave="leaveEl"
  :css="false"
>
  <p v-if="show">使用 GSAP 的动画</p>
</transition>

<script>
import { gsap } from 'gsap'

export default {
  methods: {
    enterEl(el, done) {
      gsap.from(el, {
        duration: 0.5,
        opacity: 0,
        y: 50,
        onComplete: done
      })
    },
    leaveEl(el, done) {
      gsap.to(el, {
        duration: 0.5,
        opacity: 0,
        y: 50,
        onComplete: done
      })
    }
  }
}
</script>

列表动画

对于列表项的动画效果，可以使用 <transition-group> 组件。它会为每个列表项添加动画，同时保持元素的定位。

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

.list-enter-active, .list-leave-active {
  transition: all 1s;
}
.list-enter, .list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
.list-move {
  transition: transform 1s;
}

状态动画

对于非进入/离开的动画，可以使用 Vue 的响应式系统和计算属性来驱动 CSS 或 JavaScript 动画。

<div class="box" :style="boxStyle"></div>
<button @click="toggle">切换大小</button>

export default {
  data() {
    return {
      isBig: false
    }
  },
  computed: {
    boxStyle() {
      return {
        width: this.isBig ? '200px' : '100px',
        height: this.isBig ? '200px' : '100px',
        backgroundColor: 'blue',
        transition: 'all 0.5s ease'
      }
    }
  },
  methods: {
    toggle() {
      this.isBig = !this.isBig
    }
  }
}