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

目录

一、小程序中安装Animate.css

二、修改animate.css文件后缀改为wxss

三、全局引入 animate.wxss文件

四、开心的使用啦

---

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

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

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

一、小程序中安装Animate.css

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

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

 在终端下输入命令回车：

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

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

滴~~ 

二、修改animate.css文件后缀改为wxss

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

 注意啊：

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

三、全局引入 animate.wxss文件

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

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

四、开心的使用啦

 好了，到这就结束了，

拜~~~~~~