Skip to content

Latest commit

 

History

History
74 lines (51 loc) · 2.42 KB

README.md

File metadata and controls

74 lines (51 loc) · 2.42 KB

anictr Animate.css控制器

简介

Animate.css是非常棒的CSS3动画库,然而因为存CSS3动画,使用很不灵活,所以创建了这个小型的库,用来让Animate.css更好的使用

示例

扫一扫 单个元素动画效果

扫一扫 多个元素动画效果

扫一扫 案例使用

依赖

Animate.css http://daneden.github.io/animate.css/

使用方法

anictr({
        ele:'#test2',
        ani:'slideInLeft',
        before:function(obj){
            var el = document.querySelector(obj.ele);
            el.style.visibility = 'visible';
        },
        dur:1000
    }).go().then(
            anictr({
                ele:'#test3',
                ani:'slideInDown',
                before:function(obj){
                    var el = document.querySelector(obj.ele);
                    el.style.visibility = 'visible';
                },
                dur:1000
            }),1000
    )

参数列表

参数 说明 默认值 可填值
ele 将要动画的元素 无 (必填) css选择器,如: '#test'
ani Animate.css的动画名称 无(必填) 所有 Animate.css定义的动画
dur 动画时长 Animate.css的默认值 毫秒数,如: 1000
before 动画开始前的function 无(带有个指向当前对象的参数)
after 动画结束后的function 无 (带有个指向当前对象的参数)

API

.go()

开始动画,定义第一个元素的动画时必须要调用的方法。返回值为对象本身

.then(obj, timeDelay)

跟在.go()或其他.then(obj, timeDelay)之后调用,参数obj为一个anictr对象,timeDelay为这个动画执行的时机(相对于整个时间轴的时间)。

优点

可以很方便的创建出很实用很酷的动画,代码比单独使用Animate.css简洁了很多。

缺点

完全依赖于Animate.css,所以只能调用Animate.css定义了的动画。