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,其他的请参考这里。

参数inout可以使用多个样式类的,写法同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 取消监听节点回调