浏览器调整大小后 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();
});

我的问题解决了