微信小程序引入Animate.css来实现动画效果

486 阅读1分钟

1、安装animate.css

官网:animate.style/

下载: npm install animate.css --save

需要在小程序相应的文件夹下 新建终端

2、安装之后

在小程序node——modules 中找到animate文件夹

将文件夹中的animate.css 拷贝出来

3、例如拷贝到style中

将animate.css后缀改为wxss 并放在style下面

在animate.wxss文件中 将:root改为page

(在文件的开头几行中)

4、全局引入

打开app.wxss

在最上面输入 @import 'style/animate.wxss'

5、使用

参考官方网站 将对应的动画类型直接添加在类名中即可

具体或者更多的动画效果 请参考官方文档

animate__animated这个是前缀,一定要有。注意版本4以后。