全局配置 如果你不想单独每个元素做一个动画配置，你可以通过init()方法来统一配置所有元素的动画效果。 1 2 3 4 5 6 AOS.init({ offset: 200, duration: 600, easing: 'ease-in-sine', delay: 100, }); 额外配置 AOS提供了2个额外的配置方法，这些方法只能够在初始化时使用。 配置 描述 示例值 默认值 disable AOS被禁用的条件 mobile false startEvent AOS被初始化的事件名称 exampleEvent DOMContentLoaded 禁用AOS： 如果你项在小屏幕设备中禁用AOS，可以： 1 2 3 AOS.init({ disable: 'mobile' }); 你可以传入3种设备的类型：mobile、phone或tablet。 你也可以设置自己的禁用条件，例如在屏幕小于1024像素时禁用AOS： 1 disable: window.innerWidth < 1024 或者传入一个函数，返回true或false。 1 2 3 4 disable: function () { var maxWidth = 1024; return window.innerWidth < maxWidth; } 开始动画的事件： 如果你不想滚动动画从页面加载（DOMContentLoaded）后就开始执行，可以使用startEvent来设置自己的事件，AOS会在document上监听这个事件： 1 2 3 AOS.init({ startEvent: 'someCoolEvent' }); API AOS对象有2个可用的方法： init refresh 1 AOS.refresh(); 上面的代码会重新计算元素的位置和偏移。 动画和锚位置 动画 淡入淡出动画： fade-up fade-down fade-left fade-right fade-up-right fade-up-left fade-down-right fade-down-left 翻转动画： flip-up flip-down flip-left flip-right 滑动动画： slide-up slide-down slide-left slide-right 缩放动画： zoom-in zoom-in-up zoom-in-down zoom-in-left zoom-in-right zoom-out zoom-out-up zoom-out-down zoom-out-left zoom-out-right 锚位置 top-bottom top-center top-top center-bottom center-center center-top bottom-bottom bottom-center bottom-top easing动画 你可以使用以下的一些easing动画效果： linear ease ease-in ease-out ease-in-out ease-in-back ease-out-back ease-in-out-back ease-in-sine ease-out-sine ease-in-out-sine ease-in-quad ease-out-quad ease-in-out-quad ease-in-cubic ease-out-cubic ease-in-out-cubic ease-in-quart ease-out-quart ease-in-out-quart

最后更新于 2018-07-26 12:02:13 并被添加「」标签，已有 440450 位童鞋阅读过。

本站使用「署名 4.0 国际」创作共享协议，可自由转载、引用，但需署名作者且注明文章出处