ionic3 css判断设备,Ionic3学习笔记（五）动画之使用 animate.css

本文为原创文章，转载请标明出处

目录

1. 前言

animate.css 是一款强大的、跨浏览器的预设CSS3动画库，内置了很多典型的CSS3动画，兼容性好使用方便，可以应用于我们的基于Ionic3的Hybrid App，在这里你可以看到各个动画的动画效果，现在最新的版本是3.5.2，强烈建议大家使用。

animate.scss 是基于上述 animate.css 的SASS版本，不过已经两年没有更新了，止于3.2.2版本，不过也包含了 animate.css 的大部分动画，不妨碍我们的使用。

下面是我的真机调试效果：

使用方法：

(1) 在 ./src/assets 文件夹下创建 css 文件夹，将 animate.css 拷贝到 ./src/assets/css 文件夹下

(2) 在 ./src.index.html 中导入 animate.css

(3) 对你要添加动画的对象加上指定的动画，如：我在 ./src/pages/exam/exam.html 文件中添加

......

如果想要动画效果永远存在，可以加上 infinite 字段,如：我在 ./src/pages/exam/exam.html 文件中添加

......

支持的动画效果有如下：

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

(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();

}

如有不当之处，请予指正，谢谢～

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]图 ...

随机推荐

Python input 使用

Python 3.0 中使用"input" , Python 2.0 中使用"raw_input"Python 3.5: #!C:\Program Files\ ...

Jqgrid学习API

JQGrid是一个在jquery基础上做的一个表格控件,以ajax的方式和服务器端通信. JQGrid Demo 是一个在线的演示项目.在这里,可以知道jqgrid可以做什么事情. 下面是转自其他人b ...

-webkit-text-size-adjust

ios使用-webkit-text-size-adjust禁止调整字体大小 body{-webkit-text-size-adjust: 100%!important;} android使用以下代码, ...

iOS10 UI教程子视图和父视图UI层次结构和Views继承

iOS10 UI教程子视图和父视图UI层次结构和Views继承 iOS10 UI教程子视图和父视图UI层次结构和Views继承,本节将讲解与UI层次结构和Views继承相关的内容,其中包括子视图和父视 ...

rotate array 旋转数组

class Solution {public: void rotate(vector& nums, int k) { int n=nums.size(); int i=0 ...

Java实战之01Struts2-03属性封装、类型转换、数据验证

九.封装请求正文到对象中 1.静态参数封装 在struts.xml配置文件中,给动作类注入值.调用的是setter方法. 原因:是由一个staticParams的拦截器完成注入的. 2.动态参数封装: ...

FreeMarker标签

目前最流行的两种模板技术恐怕要算freemarker和velocity了,webwork2.2对两者都有不错的支持,也就是说在webwork2中你可以随意选择使用freemarker或velocity ...

NS3网络仿真(10)： 解析以太网帧

快乐虾 http://blog.csdn.net/lights_joy/ 欢迎转载.但请保留作者信息 解析以太网帧的过程是构建以太网帧的逆过程,当我们接收到一个以太网帧时,仍然以上一节中的ARP帧为例 ...

mysql 表

关系 create table scores( id int primary key auto_increment, stuid int, subid int, score decimal(5,2) ...

Python3学习之路~8.2 socket简单实例 实现ssh 发送大量数据

实例1: 利用socket模拟客户端和服务器端各自收发一次数据: #Author:Zheng Na # 客户端 import socket # 声明socket类型,同时生成socket连接对象 cl ...