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