Spy滚动侦听模块
spy即对IntersectionObserver方法的二次封装,支持进入退出动画;支持与其他元素(menu菜单,anchor菜单)发生联动;可以改变参照父节点;最简单的用法是让进入视窗的元素有缓冲动画效果,比如渐显。
简单使用
对节点使用ax-spy
即可实现滚动监听,当然需要配合其他参数使用以获得与其他元素的联动。
- 输出
- HTML
侦听模式
侦听模式分单个元素和批量元素侦听;如果侦听元素为一个列表,那么使用批量侦听更方便。设置参数spySel
选择参与侦听的元素即表示批量侦听。
spySel参数为节点选择器,用法同getEl
函数第一个参数。
- 输出
- HTML
进入动画
参数in
可设定进入动画,该参数填写一个或多个样式类名,内置的进入动画有:_fadeIn
、_fadeInUp
、_fadeInDown
、_fadeInLeft
、_fadeInRight
、_springIn
、_scaleIn
、_flyInLeft
、_flyInRight
、_flyInUp
、_flyInDown
和_rotateIn
。
参数out
可设定退出动画,该参数填写一个或多个样式类名,内置的退出动画有:_fadeOut
、_fadeOutUp
、_fadeOutDown
、_fadeOutLeft
、_fadeOutRight
、_springOut
、_scaleOut
、_flyOutLeft
、_flyOutRight
、_flyOutUp
、_flyOutDown
和_rotateOut
。
如果需要修改默认的动画时间,可使用_dur-1~9
,dur-1是100ms,dur-2是200ms,其他的请参考这里。
参数in
和out
可以使用多个样式类的,写法同classes.add
的第二个参数,例如:in:'_fadeIn,_dur-5,_demo'。
- 输出
- HTML
基础配置
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
margin | string | '0px' | 触发偏移距离 |
threshold | array | [0, 1] | 可见区域占比 |
root | string/null | null | 参照父节点选择器 |
intvl | number | 500 | 防抖间隔时间(ms) |
repeat | boolean | true | 是否重复执行动画 |
manual | boolean | false | 是否手动添加观察对象 |
classes | string | '' | 追加样式类 |
选择器配置
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
spySel | string | '' | 监听子元素选择器 |
navSel | string | '' | 菜单节点选择器 |
subSel | string | '' | 菜单子元素选择器 |
动画配置
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
active | string | '' | 激活属性或类名 |
in | string | '' | 进入视窗动画类名 |
out | string | '' | 离开视窗动画类名 |
visible | boolean | true | 是否使用透明度 |
关联按钮配置
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
wing.selector | string | '' | 按钮节点选择器 |
wing.offset | number | 0 | 顶部偏移距离 |
wing.duration | number | 0 | 滑动动画时长 |
等待函数
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
b4Add | function | null | 添加交互前等待 |
b4Remove | function | null | 删除交互前等待 |
回调函数
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
onShow | function | null | 开始进入视窗回调 |
onShowing | function | null | 正在进入视窗回调 |
onShown | function | null | 完全显示在视窗回调 |
onIn | function | null | 进入视窗回调 |
onOut | function | null | 离开视窗回调 |
onAdded | function | null | 新增监听节点回调 |
onRemoved | function | null | 取消监听节点回调 |