1.最好用js控制动画过渡动画和延时,项目在发布时会有问题。
1、引用css和js文件,并配置:
<script>
AOS.init();
</script>
2、通过使用data-aos-*属性调整行为,例如(对照下表):
<div
data-aos="fade-up"
data-aos-offset="200"
data-aos-delay="50"
data-aos-duration="1000"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="false"
data-aos-anchor-placement="top-center"
>
</div>
3、也可以通过全局控制属性值,例如(对照下表):
<script>
AOS.init({
offset: 200,
duration: 600,
easing: 'ease-in-sine',
delay: 100,
});
</script>
属性 | 描述 | 示例值 | 默认值 |
---|---|---|---|
data-aos-offset | 是立刻触发动画还是在指定时间之后触发动画 | 200 | 120 |
data-aos-duration | 动画持续时间 | 600 | 400 |
data-aos-easing | 动画的easing动画效果 | ease-in-sine | ease |
data-aos-delay | 动画的延迟时间 | 300 | 0 |
data-aos-anchor | 锚元素。使用它的偏移来取代实际元素的偏移来触发动画 | #selector | null |
data-aos-anchor-placement | 锚位置,触发动画时元素位于屏幕的位置 | top-center | top-bottom |
data-aos-once | 动画是否只会触发一次,或者每次上下滚动都会触发 | true | false |
禁用AOS
如果想在小屏幕设备中禁用AOS,可以:
// 实用
AOS.init({
disable: 'mobile'
});
你也可以设置自己的禁用条件,例如在屏幕小于1024像素时禁用AOS:
disable: window.innerWidth < 1024
也可以传入一个函数,返回true 或 false
disable: function () {
var maxWidth = 1024;
return window.innerWidth < maxWidth;
}