将 AOS 动画添加到具有特定类的所有元素答案

【问题标题】：Adding AOS animation to all elements with specific class将 AOS 动画添加到具有特定类的所有元素
【发布时间】：2022-08-23 15:22:35
【问题描述】：

我想为所有具有 animate_right 类的元素添加 AOS 动画。我使用了这段代码，它将所有的 html（属性和类）添加到标签中，只有动画不起作用。这是我的代码

  <script src=\"/js/aos.js\"></script>
  <script>
    AOS.init({
      easing: \'ease-in-out-sine\'
    });
    
    $(document).ready(function () {
    $(\".animate_right\").addClass(\"aos-item aos-init aos-animate\");
    $(\'.animate_right\').attr({
        \"data-aos\": \"fade-right\",
        \"data-aos-once\": \"false\",
        \"data-aos-duration\": \"600\"       
    });
</script>

标签： aos.js

【解决方案1】：

您必须在初始化 AOS 之前添加属性。像这样：

<script>
    // first add attributes
    $('.animate_right').attr({
        "data-aos": "fade-right",
        "data-aos-once": "false",
        "data-aos-duration": "600"       
    });
    
    // now initialize AOS
    AOS.init();
  </script>

【讨论】：