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

我的问题是解决