javascript - 通过 Javascript 添加 AOS 属性

Question

我正在尝试添加属性以通过 javascript 启动 AOS 动画，但它无法正常工作。现在，通过js添加属性，当动画启动时，不是显示元素，而是隐藏它。我想可能是因为元素先渲染，js在添加AOS属性后才起作用，所以动画给我反着做了。这是我添加 AOS 属性的代码:

var hero = document.getElementById('main-hero');
hero.setAttribute('data-aos', 'fade-up');

有没有什么办法可以通过js添加AOS并使其生效？将其添加到 HTML 目前无法访问。

Answer 1

我遇到了同样的问题，几天后我发现你必须在 setAttribute 之后调用 AOS.init 这解决了我的问题。

import AOS from 'aos';

window.addEventListener("DOMContentLoaded", () => {

const hero = document.getElementById('main-hero');
hero.setAttribute('data-aos', 'fade-up');

    AOS.init({
        initClassName: "aos-init",
        startEvent: "DOMContentLoaded",
    });
});