动画库的使用

一、animate.css

地址https://animate.style/

安装

使用 npm 安装：

npm install animate.css --save

将其导入到您的 main.js 文件中：

import 'animate.css';

vue的 transition 标签

        
hello

效果：

 ​

类名	默认延迟时间
animate__delay-2s	2s
animate__delay-3s	3s
animate__delay-4s	4s
animate__delay-5s	5s

    
hello

类名	默认速度时间
animate__slow	2s
animate__slower	3s
animate__fast	800ms
animate__faster	500ms

 
    
hello
 

 

 二、magic.css 安装

使用 npm 安装：

npm install magic.css --save

 将其导入到您的 main.js 文件中：

 vue的 transition 添加属性动画

 

也可以自定义属性添加动画时间