ajax 导致 css 延迟_在H5，小程序，uni-app中使用animate.css

动画过渡效果对于程序的重要性是毋容置疑的，过渡动画的流畅真的能给人一种程序很顺畅的感觉。ios系统基本上不管是什么操作都喜欢运用动画过渡，所以给人一种超流畅的感觉！在项目中我们也会经常被要求在元素切换，界面过渡中添加动画过渡效果。可是自己写的话真的超级麻烦，如果有一款强大的动画库岂不是很爽。

什么是animate.css

animate.css 是一个css3动画库,包含76种动画，并且完全免费开源，可以到github上去下载,使用方法也非常简单，并且因为是css库的原因，完全兼容 H5，小程序以及uni-app。

官网：https://daneden.github.io/animate.css/

gitHnb: https://github.com/daneden/animate.css

安装方法

npm安装：

npm install animate.css --save

yarn安装:

yarn add animate.css

CDN引入

https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css

引入方法

在各个不同的环境中，引入方法有细微的区别，但是基本上大同小异。

• 在使用webpack的h5中引入上是把它引入到 main.js 中。

• 微信小程序的开发环境中，将下载好的 animate.css 引入到 app.wxss中即可,引入之前别忘了将后缀改为.wxss eg: @import './animate.wxss'; 。

• 在uni-app中引入也非常简单，将下载好的 animate.css 引入到 App.vue中即可。

使用方法

animate.css 的使用非常简单，因为它是把不同的动画绑定到了不同的类里，所以想要使用哪种动画，只需要把通用类 animated 和相应的类添加到元素上就行了。

所以说，我们想切换操作不同的动画，只需要用 css 来给需要动画的那个元素来添加，删除不同的类即可。

以下是 animate.css 提供的动画类列表：

当然，除了动画之外，我们还可以给动画元素添加其它的类来控制动画执行时间，是否无限循环，延迟时间等。

至于具体的功能，还是推荐大家去看官方文档，同时它的官网可以预览到各个动画类的具体效果；https://daneden.github.io/animate.css/。