appearjs

元素出现和消失判断组件——lib.appear

最新版本:[0.0.4]

依赖:

无

功能:

• 1、指定容器内可视区域内执行回调
• 2、指定容器扩展可视区域范围内的执行
• 3、容器内所有元素回调执行完成后执行
• 4、元素显示事件appear、消失事件disappear，可判断方向

创建一个实例:

var appearInstance = lib.appear.init({
    container: '#container',//可选，容器，默认为document
    cls: 'lib-appear',//可选，需要遍历的元素
    once: true,//可选，是否只触发一次
    x: 0,//可选，容器右边距离x以内的元素加载，默认为0
    y: 0,//可选，容器底部距离y以内的元素加载，默认为0
    onAppear: function(){}//必选，所有容器内的元素到达可视区域内执行的回调
});

实例方法:

appearInstance.bind(node)

node(selector | dom) 添加需要绑定的元素

appearInstance.fire()

判断是否在可视区域并触发相应事件

appearInstance.reset(opts)

重置设置参数，并且重新初始化当前的实例，opts同创建参数

静态方法

lib.appear.init(options)

初始化一个appear的实例

事件

• 显示事件——appear element.addEventListener('appear', function(ev){});

• 消失事件——disappear element.addEventListener('disappear', function(ev){});

• 事件对象——ev

  • 方向——ev.data.direction（top｜right｜bottom｜left｜none）

lib.appear.fireAll()

判断页面所有绑定的元素是否在可视区域并触发相应的事件

注意事项

0.0.3有bug，废弃

Change log

• 0.0.4
  • 修改重复判断逻辑，修改reset接口
• 0.0.3
  • 注意，0.0.3有bug，废弃
• 0.0.2
  • 添加animationEnd、transitionend支持，完善demo
  • 修改文档