css 滚动时Aos.js不显示元素

fumotvh3 于 2023-03-14 发布在其他

关注(0)|答案(2)|浏览(245)

这是另一个非常简单的问题，是我的问题，还是AOS.js只能和div一起工作？
因为在下面的链接中，我在一个h1上尝试了一下，但是没有成功。我在一个div上尝试了一下，但是成功了。这是一个更大的问题的一部分，这个项目涉及到div。在那里也没有成功。我可以在inspect中删除页面的属性，当它到达滚动点时，它会像预期的那样显示出来。
然后我点击控制z + y，然后我看到动画工作，只是没有在滚动。请帮助。感谢您的时间。这里是链接到迷你项目[编辑]这一个是解决，请帮助另一个，如果你可以谢谢！https://repl.it/@astroboyr/AOSJS-testing
如果你发现了，如果你想帮忙，这是一个更大的项目，
https://repl.it/@astroboyr/PianoLife

css

来源：https://stackoverflow.com/questions/56918777/aos-js-not-showing-elements-when-you-scroll-there

2条答案

按热度按时间

uklbhaso1#

你的代码没有足够的空间在底部，所以你不能看到动画的原因。如果你添加更多的<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>

赞(0）回复(0）举报 2023-03-14

yqhsw0fo2#

在我的app.js文件中，在包含以下行之后，一切都按预期开始工作。

import { useEffect } from 'react';
import AOS from 'aos'
import 'aos/dist/aos.css'

const App = () => {

   useEffect(() => {
     AOS.init({ duration: 2000 })
   }, [])

   return (
        <div data-aos="fade-in">

        </div>
   )
}

export default App

它之前不工作，因为我没有初始化AOS。
注意导入aos/dist/aos.css和添加useEffect是库正常工作所必需的。

赞(0）回复(0）举报 2023-03-14

我来回答

css 滚动时Aos.js不显示元素

2条答案

相关问题

热门标签

最新问答