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

最新推荐文章于 2024-08-26 10:06:36 发布

抄代码抄错的小牛马

最新推荐文章于 2024-08-26 10:06:36 发布

阅读量5.4k

点赞数 8

分类专栏：小程序文章标签： css 前端 javascript 小程序微信小程序

本文链接：https://blog.csdn.net/qq_61122628/article/details/127561335

版权

7 篇文章

订阅专栏

在小程序中添加动画样式可提升页面炫酷感和用户体验。本文推荐Animate.css动画库，并记录其在小程序中的引入方法，包括在小程序中安装、修改文件后缀为wxss、全局引入该文件，同时提醒4.0版本之后要加特定前缀才能出效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

一、小程序中安装Animate.css

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

在终端下输入命令回车：

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

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

滴~~

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

注意啊：

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

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

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

好了，到这就结束了，

拜~~~~~~