Ionic3学习笔记(五)动画之使用 animate.css
本文为原创文章,转载请标明出处
目录
- 前言
- animate.css 的使用
- animate.scss 的使用
1. 前言
animate.css 是一款强大的、跨浏览器的预设CSS3动画库,内置了很多典型的CSS3动画,兼容性好使用方便,可以应用于我们的基于Ionic3的Hybrid App,在这里你可以看到各个动画的动画效果,现在最新的版本是3.5.2,强烈建议大家使用。
animate.scss 是基于上述 animate.css 的SASS版本,不过已经两年没有更新了,止于3.2.2版本,不过也包含了 animate.css 的大部分动画,不妨碍我们的使用。
下面是我的真机调试效果:
2. animate.css 的使用
animate.css
GitHub地址 https://github.com/daneden/animate.css
可在 https://daneden.github.io/animate.css/ 查看具体动画效果
使用方法:
(1) 在 ./src/assets
文件夹下创建 css
文件夹,将 animate.css
拷贝到 ./src/assets/css
文件夹下
(2) 在 ./src.index.html
中导入 animate.css
<link rel="stylesheet" href="assets/css/animate.css">
(3) 对你要添加动画的对象加上指定的动画,如:我在 ./src/pages/exam/exam.html
文件中添加
<ion-card class="animated bounceIn">
......
</ion-card>
如果想要动画效果永远存在,可以加上 infinite
字段,如:我在 ./src/pages/exam/exam.html
文件中添加
<ion-card class="animated infinite bounce">
......
</ion-card>
支持的动画效果有如下:
bounce
flash
pulse
rubberBand
shake
headShake
swing
tada
wobble
jello
bounceIn
bounceInDown
bounceInLeft
bounceInRight
bounceInUp
bounceOut
bounceOutDown
bounceOutLeft
bounceOutRight
bounceOutUp
fadeIn
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeInUp
fadeInUpBig
fadeOut
fadeOutDown
fadeOutDownBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig
fadeOutUp
fadeOutUpBig
flipInX
flipInY
flipOutX
flipOutY
lightSpeedIn
lightSpeedOut
rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight
rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight
hinge
jackInTheBox
rollIn
rollOut
zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp
zoomOut
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp
slideInDown
slideInLeft
slideInRight
slideInUp
slideOutDown
slideOutLeft
slideOutRight
slideOutUp
3. animate.scss 的使用
animate.scss
GitHub地址 https://github.com/geoffgraham/animate.scss
(1) 在 ./src/assets
文件夹下创建 animate
文件夹,将 git clone
下来的文件夹下的所有文件拷贝到 animate
文件夹下。
(2) 在 ./src/app/app.scss
文件中导入 animate.scss
@import "../assets/animate/animate.scss";
(3) 对你要添加动画的对象加上指定的动画,如:我在 ./src/pages/exam/exam.scss
文件中添加
ion-card {
@include bounceIn();
}
如有不当之处,请予指正,谢谢~
Ionic3学习笔记(五)动画之使用 animate.css的更多相关文章
- C#可扩展编程之MEF学习笔记(五):MEF高级进阶
好久没有写博客了,今天抽空继续写MEF系列的文章.有园友提出这种系列的文章要做个目录,看起来方便,所以就抽空做了一个,放到每篇文章的最后. 前面四篇讲了MEF的基础知识,学完了前四篇,MEF中比较常用 ...
- (转)Qt Model/View 学习笔记 (五)——View 类
Qt Model/View 学习笔记 (五) View 类 概念 在model/view架构中,view从model中获得数据项然后显示给用户.数据显示的方式不必与model提供的表示方式相同,可以与 ...
- java之jvm学习笔记五(实践写自己的类装载器)
java之jvm学习笔记五(实践写自己的类装载器) 课程源码:http://download.csdn.net/detail/yfqnihao/4866501 前面第三和第四节我们一直在强调一句话,类 ...
- Learning ROS for Robotics Programming Second Edition学习笔记(五) indigo computer vision
中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS for Robotics Pr ...
- Typescript 学习笔记五:类
中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...
- ES6学习笔记<五> Module的操作——import、export、as
import export 这两个家伙对应的就是es6自己的 module功能. 我们之前写的Javascript一直都没有模块化的体系,无法将一个庞大的js工程拆分成一个个功能相对独立但相互依赖的小 ...
- muduo网络库学习笔记(五) 链接器Connector与监听器Acceptor
目录 muduo网络库学习笔记(五) 链接器Connector与监听器Acceptor Connector 系统函数connect 处理非阻塞connect的步骤: Connetor时序图 Accep ...
- python3.4学习笔记(五) IDLE显示行号问题,插件安装和其他开发工具介绍
python3.4学习笔记(五) IDLE显示行号问题,插件安装和其他开发工具介绍 IDLE默认不能显示行号,使用ALT+G 跳到对应行号,在右下角有显示光标所在行.列.pycharm免费社区版.Su ...
- Go语言学习笔记五: 条件语句
Go语言学习笔记五: 条件语句 if语句 if 布尔表达式 { /* 在布尔表达式为 true 时执行 */ } 竟然没有括号,和python很像.但是有大括号,与python又不一样. 例子: pa ...
- 【opencv学习笔记五】一个简单程序:图像读取与显示
今天我们来学习一个最简单的程序,即从文件读取图像并且创建窗口显示该图像. 目录 [imread]图像读取 [namedWindow]创建window窗口 [imshow]图像显示 [imwrite]图 ...
随机推荐
- MongoDB对应SQL语句
-------------------MongoDB对应SQL语句------------------- 1.Create and Alter 1. sql: crea ...
- 格式化JSON字符串
提出需求 异步调用获取JSON数据时非常不直观,每次都需要格式化一次,才能直观的看到数据集合的结构,现在需要实现输出带缩进的格式. 实现效果 在浏览器的查看源文件中已经实现格式化,如果是页面使用,可以 ...
- MySQL问题总结(持续更新)
CHAR和VARCHAR的区别 存储方式和检索方式不同: 1.CHAR固定长度字符类型.CHAR存储定长数据,CHAR字段上的索引效率高,比如定义char(10),那么不论你存储的数据是否达到了10个 ...
- github+hexo搭建自己的博客网站(五)进阶配置(畅言实现博客的评论)
如何对如何搭建hexo+github可以查看我第一篇入门文章:http://www.cnblogs.com/chengxs/p/7402174.html 详细的可以查看hexo博客的演示:https: ...
- mysql数据库基本操作以及获取数据库强大帮助文档
MySQL数据库强大帮助文档 mysql 中help等价于\h或者? mysql> ? create database;(查看创建数据库的语法) mysql> ? drop databas ...
- Django1-10-5管理界面中文设置
先确定一下版本是否更高,低版本设置(settings.py文件): LANGUAGE_CODE = 'zh-CN'TIME_ZONE = 'Asia/Shanghai' 但是新版本就会提示不识别zh- ...
- SQL Server锁类型
SQL Server锁类型(SQL)收藏 1. HOLDLOCK: 在该表上保持共享锁,直到整个事务结束,而不是在语句执行完立即释放所添加的锁. 2. NOLOCK:不添加共享锁和排它锁,当这个选项生 ...
- Junit单元测试实例
1.非注解 public class Test { @org.junit.Test public void testPrice() { ClassPathXmlApplicationContext b ...
- STM32—无需中断来实现使用DMA接收串口数据
本节目标: 通过DMA,无需中断,接收不定时长的串口数据 描述:当在串口多数据传输下,CPU会产生多次中断来接收串口数据,这样会大大地降低CPU效率,同时又需要CPU去做其它更重要的事情,我们应该如何 ...
- c# HttpWebRequest 模拟HTTP post 传递JSON参数
//HTTP post JSON 参数 private string HttpPost(string Url, Object ticket) { ...