uni-app 使用动画 css 库(Animate) Animate.css

心已赠人 2023-06-30 15:54 16阅读 0赞

新手uni-app引入css3动画Animate.css库，animate.css是一堆很酷，有趣且跨浏览器的动画，供您在项目中使用。非常适合强调，主页，滑块和一般的加水效果，官方没有对它进行太多的说明，目前版本为3.7.2 ，动画库的使用方式很简单。详细说明使用教程以及如何设置动画快慢以及延迟

新手uni-app引入css3动画Animate.css库

新地址 在这里下载  
[https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css][https_cdnjs.cloudflare.com_ajax_libs_animate.css_3.7.2_animate.min.css]

1.下载css3动画  
下载地址：[https://daneden.github.io/animate.css/][https_daneden.github.io_animate.css]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTc5Mzc5MA_size_16_color_FFFFFF_t_70]  
打开地址后点击Download Animate.css

新手uni-app引入css3动画Animate.css库

随后鼠标右键保存为css文件

新手uni-app引入css3动画Animate.css库

2.引入样式文件  
新建uni-app项目  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTc5Mzc5MA_size_16_color_FFFFFF_t_70 1]

新建components目录把下载好的animate.css放入目录下，便打开app.vue文件引入公共css

/\*每个页面公共css \*/  
@import url("/components/animate.css");  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTc5Mzc5MA_size_16_color_FFFFFF_t_70 2]

新手uni-app引入css3动画Animate.css库

3.使用动画  
使用语法

使用之后，zz是原本的样式，hover-class指定按下去的样式类。当 hover-class=”none” 时，没有点击态效果，tada可以在动画中预览相对应的效果

4.延迟动画  
可以直接在元素的class属性上添加延迟，如下所示：默认延迟仅为1秒到5秒。如果您需要自定义延迟，请将其直接添加到您自己的CSS代码中

< view class = “动画弹跳延迟-2s ” >示例</ view >

班级名称 延迟时间  
delay-2s 2s  
delay-3s 3s  
delay-4s 4s  
delay-5s 5s

5动画快慢  
通过添加这些类，可以控制动画的速度，如下所示：animated该类的默认速度为1s。如果您需要自定义持续时间，请将其直接添加到您自己的CSS代码中

< view class = “动画弹跳延迟-2s ” >示例</ view >

班级名称 速度时间  
slow 2s  
slower 3s  
fast 800ms  
faster 500ms  
css3  
uni-app

本站资源除特别声明外，转载文章请声明文章出处

[枫瑞博客网 » 新手uni-app引入css3动画Animate.css库][_ _uni-app_css3_Animate.css]

[https_cdnjs.cloudflare.com_ajax_libs_animate.css_3.7.2_animate.min.css]: https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css
[https_daneden.github.io_animate.css]: https://daneden.github.io/animate.css/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTc5Mzc5MA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200118154926805.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTc5Mzc5MA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTc5Mzc5MA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200118154939613.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTc5Mzc5MA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTc5Mzc5MA_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/2020011815500371.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTc5Mzc5MA==,size_16,color_FFFFFF,t_70
[_ _uni-app_css3_Animate.css]: https://www.frbkw.com/1987/