在我缩放 in/out 之前，AOS 动画不会触发

Question

如标题所述，除非我放大或缩小、打开控制台或调整浏览器大小，否则我的 AOS 动画不会触发。当动画没有被触发时，我页面上的内容仍然显示，但我显然更喜欢动画是否正常工作。我将在下面提供我的代码片段，如果有人可以发现任何错误或以前有过此问题的经验，请告诉我如何添加修复程序。提早。

 <div
          className="flex flex-col md:flex-row justify-center items-center mt-20"
          data-aos="fade-in"
          data-aos-duration="1200"
        >
          <div className="text-center md:text-left pb-4 px-8">
            <h2 className="text-2xl text-gray-600">Lorem ipsum</h2>
            <h2 className="text-base text-gray-700">
            Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum.
            </h2>
          </div>
          <img
            src={profiles}
            class="w-4/5 md:w-1/2 lg:w-1/3 mx-8 shadow-md hover:shadow-lg trans-3"
          />
        </div>

Answer 1

没关系，找到了解决方案。对于以后遇到类似问题的人，我补充说：

<script>
 window.addEventListener("load", Aos.refresh);
</script>

到我的 HTML 文件的顶部，这似乎解决了问题。

在我缩放 in/out 之前，AOS 动画不会触发

AOS animations don't trigger until I zoom in/out

javascript

css

reactjs

aos.js