前言
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>
