美文网首页ionic3+Ionic 3
Ionic3学习笔记(五)动画之使用 animate.css

Ionic3学习笔记(五)动画之使用 animate.css

作者: Metaphors | 来源:发表于2017-10-09 10:58 被阅读177次

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

    目录

    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 的大部分动画,不妨碍我们的使用。

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

    demo

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

    如有不当之处,请予指正,谢谢~

    相关文章

      网友评论

      • 靖云儿:我想问一下,animate里面动画中的个别几个的时长,能改短一点吗
        Metaphors:@靖云儿 当然是你要改什么改什么啦……动画时长就是animation-duration
        靖云儿:是改animated这个属性里面的duration那个吗?还是针对哪个改哪个?
        Metaphors:@靖云儿 可以的,食用前animate.css下下来自己改改

      本文标题:Ionic3学习笔记(五)动画之使用 animate.css

      本文链接:https://www.haomeiwen.com/subject/uzvuyxtx.html