微信小程序使用Animate.css动画库

css-toc" style="margin-left:0px;">一、小程序中安装Animate.css

css%E6%96%87%E4%BB%B6%E5%90%8E%E7%BC%80%E6%94%B9%E4%B8%BAwxss-toc" style="margin-left:0px;">二、修改animate.css文件后缀改为wxss

三、全局引入 animate.wxss文件

四、开心的使用啦

在小程序中，我们添加适当的动画样式，不仅会让页面更加炫酷，还会提高用户的体验效果。而大佬们早就写好了一些动画库，嘿嘿嘿~~~~ 这里推荐： Animate.css动画库

它的官网地址：Animate.css | A cross-browser library of CSS animations.

提供了很多的动画效果，可以自己去挑选，它官网下有使用教程，这里就记录一下小程序中怎么引入它：

css">一、小程序中安装Animate.css

安装命令： npm install animate.css --save

前提是要有node环境哈，不知道的可以看看这个，里面有记录：微信小程序云开发：npm命令提示: ‘npm‘ 不是内部或外部命令，也不是可运行的程序_抄代码抄错的小牛马的博客-CSDN博客

在终端下输入命令回车：

安装成功后：会有个--> node_modules 文件夹，( 注意：这里安装成功后，如果没有看到 animate.css 包名的话，可能是微信开发者工具没有加载出来，可以重新打开此项目再试试。)

可以查看我们安装库的版本是多少，如下

滴~~

css%E6%96%87%E4%BB%B6%E5%90%8E%E7%BC%80%E6%94%B9%E4%B8%BAwxss">二、修改animate.css文件后缀改为wxss

找到包下的animate.css文件，将后缀改为wxss,放到utils文件夹下：

注意啊：

要将 animate.wxss 中的 :root 改为 page 如下：

在 app.wxss 文件中写入 @import './utils/animate.wxss' 即可：如果放在其他位置，自己改下路径就OK的

最后还需要注意：4.0版本 之后要加 animate__animated 前缀，不然它是不会出效果滴

好了，到这就结束了，

拜~~~~~~