uni-app(三)----导入css动画库

我们在开发程序的时候多多少少肯定会有一些动画效果的,那我们要如何去弄这些动画呢

uni-app引入css动画Animate.css库

首先我们可以去官网下载

在这里我直接有个下载好了的
https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css

打开网址之后另存到桌面就好
在这里插入图片描述

刚下载之后不是这个名字的,记得要改!!

下载好之后,我们就把它复制好,然后在项目里的common里粘贴好。
在这里插入图片描述
然后记得在App.vue里面导入
在这里插入图片描述
接下来就可以在项目中使用啦
在这里插入图片描述

其中的animate是必不可少的,动画名称可以去官网查看喔。

在这里复制动画效果的名称

在这里得要说一声了,复制好名称,粘贴进去项目之后的效果是这样的
在这里插入图片描述
但是这样是没有效果的,我们得把_前面的删掉,这样才会有效果。
在这里插入图片描述

对于其他的效果,比如延迟动画、动画快慢等

延迟动画

下面的效果是延迟动画效果,单位是。它可以直接在元素的class属性上添加延迟。
在这里插入图片描述
在这里插入图片描述

动画快慢

在这里插入图片描述
上面的faster的意思就是让动画效果更快,其他的还有slower、slow、fast

这几个属性对应的时间分别为:slower–3s,slow–2s,fast–800ms,faster–500ms

大家可根据自身爱好来添加。

最后说一下,多看开发文档,这个是真的有用,能学到很多知识。我把超链接放这了开发文档


版权声明:本文为weixin_43844418原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。