Ionic3学习笔记（五）动画之使用animate.css

2019独角兽企业重金招聘Python工程师标准>>>

本文为原创文章&＃xff0c;转载请标明出处

1. 前言

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

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

下面是我的真机调试效果&＃xff1a;
demo

2. animate.css 的使用

animate.css GitHub地址 https://github.com/daneden/animate.css

可在 https://daneden.github.io/animate.css/ 查看具体动画效果

使用方法&＃xff1a;

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

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

(3) 对你要添加动画的对象加上指定的动画&＃xff0c;如&＃xff1a;我在 ./src/pages/exam/exam.html 文件中添加

......

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

......

支持的动画效果有如下&＃xff1a;

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