当前位置：首页 > VUE

vue使用animate实现动画

2026-02-21 04:43:50VUE

使用 Animate.css 实现 Vue 动画

在 Vue 项目中集成 Animate.css 可以快速实现丰富的 CSS 动画效果。Animate.css 提供了大量预设的动画类名，只需简单添加类名即可触发动画。

安装 Animate.css 依赖：

npm install animate.css

全局引入 Animate.css：

vue使用animate实现动画

// main.js
import 'animate.css'

基础用法：直接添加类名

在 Vue 模板中直接使用 Animate.css 的类名组合：

<template>
  <div class="animate__animated animate__bounce">弹跳动画</div>
</template>

动态控制动画

通过 Vue 的响应式数据动态控制动画：

vue使用animate实现动画

<template>
  <div 
    class="animate__animated"
    :class="{'animate__shakeX': shouldShake}"
    @click="triggerAnimation"
  >
    点击触发抖动动画
  </div>
</template>

<script>
export default {
  data() {
    return {
      shouldShake: false
    }
  },
  methods: {
    triggerAnimation() {
      this.shouldShake = true
      setTimeout(() => {
        this.shouldShake = false
      }, 1000)
    }
  }
}
</script>

结合 Transition 组件

与 Vue 的 Transition 组件配合使用实现入场/离场动画：

<template>
  <button @click="show = !show">切换</button>
  <Transition
    enter-active-class="animate__animated animate__fadeInDown"
    leave-active-class="animate__animated animate__fadeOutUp"
  >
    <div v-if="show">过渡动画内容</div>
  </Transition>
</template>

<script>
export default {
  data() {
    return {
      show: true
    }
  }
}
</script>

自定义动画时长

通过 CSS 变量覆盖默认动画时长：

/* 在全局样式或组件样式中 */
.animate__animated {
  --animate-duration: 0.5s;
}

动画事件监听

监听动画开始和结束事件：

<template>
  <div
    class="animate__animated animate__bounce"
    @animationstart="handleStart"
    @animationend="handleEnd"
  >
    带事件监听的动画
  </div>
</template>

<script>
export default {
  methods: {
    handleStart() {
      console.log('动画开始')
    },
    handleEnd() {
      console.log('动画结束')
    }
  }
}
</script>