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

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

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

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

1.下载css3动画

下载地址:https://daneden.github.io/animate.css/

打开地址后点击Download Animate.css

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

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

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

2.引入样式文件

新建uni-app项目

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

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

/*每个页面公共css */
@import url("/components/animate.css");

 

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

3.使用动画

使用语法

<view class=" 动画库名字" hover-class="点击后的需要的效果">

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

<view class="zz animated" hover-class="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
分享到 :
相关推荐

uni-app 实战接入热门小说API接口 适用于新手

uni-app实战接入热门小说API接口适用于新手需要一点点的Uni-app的[&h...

星宿UI 静态文件图文展示分类展示扁平化风格微信小程序开发支持多端

“现在是2016年的11月10号晚上10点,有一人告诉我千万不要在这个时候开直播&[...

星宿UI V0.1-微信小程序:wordprss开源小程序支持激励视频流量主

看清了很多人,却不能随意拆穿;讨厌着很多人,却又不能轻易翻脸。有时候,生活就是要逼自...

uni-app外层view包裹内层view防止冒泡事件

uni-app 是一个使用 Vue.js开发所有前端应用的框架,开发者编写一套代码[...

发表评论

邮箱地址不会被公开。 必填项已用*标注

评论(3)

  • Sober(清醒) 普通用户 10/20/2019

    test

  • 小安 游客 10/17/2019

    飞常喜欢

  • 瑞金 游客 10/17/2019

    感谢教程