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上没有效果
电脑性能配置项没有勾选动画。搜索 外观与性能 或者如下
- win+R 打开运行
- 输入%windir%\system32\SystemPropertiesPerformance.exe,回车
- 勾选
4、效果
我们管理系统用的最多的效果就是fadeIn,觉得bounceInRight的弹弹效果还挺有意思的。
这个网站的效果还挺好看的:https://www.jq22.com/yanshi830,适合对外的系统,可以做参考用
感谢以下博客:
Vue transation结合animate.css设置无效的解决办法
解决动画库Animate.css在谷歌浏览器中没有效果的问题