vue+ts或者react+ts如何使用animate.css_找不到模块“animate.css”或其相应的类型声明-优快云博客

本文介绍如何在Vue和React应用中使用Animate.css库实现动画效果，包括安装步骤、类型声明、组件中应用动画及修改动画属性的方法。适合前端开发者快速上手CSS动画。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue+ts或者react+ts如何使用animate.css

- 前言
- 使用animate.css（以vue+ts为例，react可参照类似方法）

前言

animate.css是一个第三方的纯css库，其中内置了众多我们常用的动画特效，详细特效及文档可以浏览animate.style以及animate.css动画演示，关于源码，可查看animate.css源码

使用animate.css（以vue+ts为例，react可参照类似方法）

安装
```
npm i animate.css -S
```

main.ts中引入

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import animated from 'animate.css'; // 引入animate.css

const app = createApp(App);

app.use(store);
app.use(router);
app.use(animated); // 注册animate.css

app.mount('#app');

window.vm = app;

此时会提示找不到模块“animate.css”或其相应的类型声明
在这里插入图片描述
那么我们就需要修改shims-vue.d.ts，声明一下animate.css的类型

/* eslint-disable */
declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

declare module '*.vue' {
  import Vue from 'vue';
  export default Vue;
}

declare module '*.png' {
  export const png: any;
}
declare module '*.jpg' {
  export const jpg: any;
}
declare module '*.jpeg' {
  export const jpeg: any;
}
declare module '*.gif' {
  export const gif: any;
}

declare module 'animate.css' // 声明animate.css的类型，否则引入animate.css会报错，提示找不到animate.css模块

declare global {
  interface Window {
    [propName: string]: any;
  }
}

组件中使用animate.css，需要注意的是，样式class类名，必须加上animate__animated，其次则是要引入动画的class类名，如animate__slideInUp

<template>
  <div class="content-box animate__animated animate__slideInUp">
    滑动进入特效演示
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  setup() {},
});
</script>
<style lang="scss" scoped>
.content-box {
	width: 200px;
	height: 200px
}
</style>

如果想修改动画的属性，比如执行时间，延迟等等，有以下几种方法
①方法1：直接通过动画class类名animated修改

.animated {
    -webkit-animation-duration: 1s; 
    animation-duration: 2s; // 动画执行时间
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

②方法2：修改指定动画的属性

.animate__slideInUp {
    -webkit-animation-duration: 1s; 
    animation-duration: 2s; // 动画执行时间
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

③方法3：在要执行动画的div设置stye

<div class="content-box animate__animated animate__slideInUp" :style="{animationDuration: '500ms'}"></div>