javascript - 滚动到 Aos.js 时不显示元素

标签 javascript html css

这又是一个极其简单的问题。只是我,还是 AOS.js 只适用于 div?

因为在下面的链接中,我在 h1 上尝试它,但它不起作用。我在 div 上试了一下,它起作用了。这是一个更大问题的一部分,该元素涉及 div。它在那里也不起作用。我可以在 inspect 中从页面中删除属性,当它到达滚动点时,它会像预期的那样显示。

然后我点击 control z + y 然后我看到动画工作,只是不在滚动上。请帮忙。谢谢你的时间。这是迷你元素的链接 [编辑]这个已经解决了,如果可以的话请帮忙解决另一个,谢谢! https://repl.it/@astroboyr/AOSJS-testing

如果你找到了,这里是更大的元素,如果你想帮忙的话,

https://repl.it/@astroboyr/PianoLife

最佳答案

您的代码底部没有足够的空间,因此您看不到动画。如果你添加更多 <br>在底部你会看到它的工作。

    <!DOCTYPE html>
    <html>
      <head>
        <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>repl.it</title>
        <link href="style.css" rel="stylesheet" type="text/css" />
      </head>
      <body>
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <div data-aos="fade-up"></div>
        <!-- works with div -->
        <h1 data-aos="fade-right">Some H1</h1>

        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

        <!-- doesnt with h1 WHYYYYYYY -->
        <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
        <script src="script.js"></script>
      </body>
    </html>

关于javascript - 滚动到 Aos.js 时不显示元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56918777/

相关文章:

javascript - 在没有 MasterPage 的 asp.net 中将 JavaScript 添加到许多页面(超过 500 个)

javascript - 无法从模板中访问 Backbone.js 集合/模型

javascript - 为什么在使用 || 时返回两个值而不是一个值在返回声明中?

html - CSS 文件未实现

javascript - 使用 jQuery 改变导航栏背景颜色

javascript - 行建立输入动画

javascript - 将 JavaScript 计时器函数转换为使用异步调用

php - sql count 显示数量

css - Mixin 大小参数 CSS 问题

html - Kendo 表中的 Bootstrap 下拉列表?