浏览器调整大小后，AOS动画无法正常触发

Question

当此页面首次加载时，AOS正常运行。每个“白色方块”动画同时触发，所有6个方块都可见。不过，我注意到，当我将浏览器调整为较小的尺寸，然后再将其重新调整为较大时，AOS与我设置的媒体查询相结合会导致某些块丢失。这是不一致的，但是如果你继续调整大小，你会发现一个点，你只能看到6个中的2个块，或者6个中的4个块。请自己尝试，我已经在这里隔离了代码：

http://www.blacksanddesign.com/stack-overflow-question-1.html

这是一张图片，所以你可以看到我所说的内容：

有谁知道可能导致这种情况的原因？非常感谢帮助。谢谢！

<script src="aos.js"></script>

	<script>
			AOS.init({
				easing: 'ease-in-out-sine'
			});
		</script>

body{
	margin:0;
}
.block#features {
	background-color:black;
	padding-top:100px;
	padding-bottom:100px;
	text-align:center;
}

.title#features{
	font-size:30px;
	color:white;
	padding-bottom:75px;
}

.features{
	width:87%;
	margin-left: auto;
	margin-right: auto;
	font-size:0;
	text-align:center;
}

ul{
	padding-left:0;
	padding-right:0;
	font-size:0;
}

li{
	list-style-type:none;
	background-color:white;
	width: 32.73%;
	display:inline-block;
	padding-top:30px;
	text-align:center;
	margin:.3%;
	vertical-align:top;
	height: 250px;
	padding-left:0;
	padding-right:0;
}

.features h2{
	font-size:20px;
}

.features p{
	font-size:12px;
}

@media only screen and (max-width: 800px) {
	li{width:100%}
}

<link href="http://www.blacksanddesign.com/css/aos.css" rel="stylesheet"/>

<div class="block" id="features">
<div class="title" id="features">OFFERING YOU</div>
<div class="features">
<ul>
<li aos="zoom-in"><h2>hello</h2><p>hello</p></li>
<li aos="zoom-in"><h2>hello</h2><p>hello</p></li>
<li aos="zoom-in"><h2>hello</h2><p>hello</p></li>
<li aos="zoom-in"><h2>hello</h2><p>hello</p></li>
<li aos="zoom-in"><h2>hello</h2><p>hello</p></li>
<li aos="zoom-in"><h2>hello</h2><p>hello</p></li>
</ul>
</div>
</div>

Answer 1

我有同样的问题 并使用

let samt = 0;
window.addEventListener('scroll', function() {
samt <= 10 ? samt++ : AOS.refresh();
});

我的问题就解决了