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
  •