标签： 动画

安装

npm install animate.css --save
or
yarn add animate.css

在main.ts中引入

import { createApp } from 'vue'
import App from './App.vue'
// 引入animate.css
import 'animate.css'

createApp(App).mount('#app')

此时会提示找不到模块“animate.css”或其相应的类型声明

解决方法

找到 src/vite-env.d.ts（老版本Vite为shims-vue.d.ts）

添加下面代码

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

使用

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

<template>
  <div class="content-box animate__animated animate__slideInUp">
    滑动进入特效演示
  </div>
</template>

修改动画属性

方法一：直接通过动画class类名animated修改

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

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

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

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

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

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