animate.css 使用记录

1、animate.css官网

2、vue使用animate.css没有效果

一定要加上前缀animate__， transition中使用也要记得加。

// 1 、安装
npm i animate.css -s

// 2、main.js 中加入
import animated from 'animate.css'
// 注册为全局组件
Vue.use(animated)

// 3、使用
<router-view id="router-animate" class="animate__animated animate__fadeIn"></router-view>

// 4、自定义动画时间，class或者id都行
#router-animate{
  animation-duration: 0.8s;
}

3、在某些电脑的chrome上没有效果

电脑性能配置项没有勾选动画。搜索 外观与性能 或者如下

1. win+R 打开运行
2. 输入%windir%\system32\SystemPropertiesPerformance.exe，回车
3. 勾选
   

4、效果

我们管理系统用的最多的效果就是fadeIn，觉得bounceInRight的弹弹效果还挺有意思的。

这个网站的效果还挺好看的：https://www.jq22.com/yanshi830，适合对外的系统，可以做参考用

感谢以下博客：

Vue transation结合animate.css设置无效的解决办法
解决动画库Animate.css在谷歌浏览器中没有效果的问题