Question

我使用AOS插件，并且由于某种原因，当我在localhost测试中运行它时，它无法显示但是当我在codepin上运行它时，它运行得很好。

我有与codepin中显示的代码相同的代码，并且我已在AOS.init代码中使用<script>来运行它。我的代码中也有CDN样式表和脚本。

<html>
    <head>
        <title>What To Eat - Home</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <link href="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css" rel="stylesheet">
        <script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="javascript/script.js"></script>
        <script>
        AOS.init({
  duration: 1200,
})
      </script>
    </head>
    <body>
<div class="item" data-aos="fade-up">1</div>
<div class="item" data-aos="fade-down">2</div>
<div class="item" data-aos="fade-right">3</div>
<div class="item" data-aos="fade-left">4</div>

<div class="item" data-aos="zoom-in">5</div>
<div class="item" data-aos="zoom-out">6</div>

<div class="item" data-aos="slide-up">7</div>

<div class="item" data-aos="flip-up">8</div>
<div class="item" data-aos="flip-down">9</div>
<div class="item" data-aos="flip-right">10</div>
<div class="item" data-aos="flip-left">11</div>

    </body>
</html>

CSS与您在codepin中看到的相同。

我认为浏览器版本（Chrome - 最新版本）不是问题，因为我能够在CodePin中看到结果足够好。

如何在本地主机中运行此插件？

Answer 1

您需要在呈现页面后调用脚本，这样可以在创建后将事件绑定到元素：

<html>
    <head>
        <title>What To Eat - Home</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <link href="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css" rel="stylesheet">
        <script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="javascript/script.js"></script>

    </head>
    <body>
<div class="item" data-aos="fade-up">1</div>
<div class="item" data-aos="fade-down">2</div>
<div class="item" data-aos="fade-right">3</div>
<div class="item" data-aos="fade-left">4</div>

<div class="item" data-aos="zoom-in">5</div>
<div class="item" data-aos="zoom-out">6</div>

<div class="item" data-aos="slide-up">7</div>

<div class="item" data-aos="flip-up">8</div>
<div class="item" data-aos="flip-down">9</div>
<div class="item" data-aos="flip-right">10</div>
<div class="item" data-aos="flip-left">11</div>

    </body>
</html>
<script>
    AOS.init({
      duration: 1200,
    })
</script>

AOS动画滚动插件不会出现

1 个答案: