通过 Javascript 添加 AOS 属性答案

【问题标题】：Add AOS attributes by Javascript通过 Javascript 添加 AOS 属性
【发布时间】：2022-08-18 01:19:45
【问题描述】：

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

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

有没有办法通过js添加AOS并让它工作？将其添加到 HTML 目前不可访问。

你有什么解决办法吗？

标签： javascript animation aos.js

【解决方案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",
    });
});

【讨论】：