AOS（滚动动画）库在选择要使用jQuery动画的元素时不起作用

Question

[我正在尝试使用AOS为许多页面设置H1元素的动画（滚动动画）。我有几个使用标题的页面，因此我将使用jQuery选择所有标题。如果我在每个标题中手动输入属性，它将起作用，但通过jQuery添加属性时则无效。我已经使用jQuery选择了其他元素来设置它们的动画，并且它们确实起作用。磁贴位于每个页面的顶部。谢谢！

 <link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
 <script src="https://unpkg.com/[email protected]/dist/aos.js"></script>

 <h1 class="title"> </h1>

 $(document).ready(function () {
    $('.title').attr({
       "data-aos": "zoom-in",
       "data-aos-duration": "2000"
    });

    AOS.init();
 });

 //refresh animations
 $(window).on('load', function() {
    AOS.refresh();
 });

Answer 1

<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>

<h1 class="title"> </h1>

$(document).ready(function () {
    $('.title').attr({
        "data-aos": "zoom-in",
        "data-aos-duration": "2000"
    });
    setTimeout(() => {
        AOS.init();
    }, 120);
});