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

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

目录

1. 前言
2. animate.css 的使用
3. 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();
}

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