vue使用animate实现动画

使用 Animate.css 在 Vue 中实现动画

在 Vue 项目中集成 Animate.css 可以为元素添加丰富的 CSS 动画效果。Animate.css 是一个预定义的 CSS 动画库，无需手动编写关键帧动画。

安装 Animate.css 依赖：

npm install animate.css

全局引入 Animate.css：

// main.js
import 'animate.css';

基础用法：直接添加类名

在模板中为元素添加 animate__animated 和具体的动画类名（如 animate__fadeIn）：

<template>
  <div class="animate__animated animate__fadeIn">内容</div>
</template>

动态控制动画

结合 Vue 的响应式特性，通过变量控制动画触发：

<template>
  <div 
    class="animate__animated"
    :class="{'animate__bounce': shouldBounce}"
    @click="toggleBounce"
  >
    点击触发动画
  </div>
</template>

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

使用 Transition 组件

与 Vue 的 <transition> 组件结合实现入场/离场动画：

<template>
  <transition
    enter-active-class="animate__animated animate__fadeIn"
    leave-active-class="animate__animated animate__fadeOut"
  >
    <div v-if="show">动态显示的内容</div>
  </transition>
</template>

自定义动画时长

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

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

注意事项

动画类名需要完整前缀 animate__（v4+版本要求） 重复动画需通过 JavaScript 手动移除/添加类名 某些动画可能需要设置 display: inline-block 对于复杂场景可考虑结合 vue-use 的 useAnimate 等工具库