Question

我将问题简化为以下代码：

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.0/fullpage.min.css"
      integrity="sha512-RVmrWua3k1yTDEOg4Yzs2bK5+Thh7nM6jrhDq/6/5/Mwa0JbYe4pP4YMK5sqghKz01T3DgrwYc57Jaf1PSurCg=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <link rel="stylesheet" href="style.css" />
    <title>Problem</title>
  </head>
  <body>
    <div id="fullpage">
      <div class="section">
        <h1>First Page</h1>
      </div>
      <div class="section">
        <div class="line"></div>
      </div>
    </div>
  </body>

  <script
    src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"
    integrity="sha512-cdV6j5t5o24hkSciVrb8Ki6FveC2SgwGfLE31+ZQRHAeSRxYhAQskLkq3dLm8ZcWe1N3vBOEYmmbhzf7NTtFFQ=="
    crossorigin="anonymous"
    referrerpolicy="no-referrer"
  ></script>
  <script
    src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.0/fullpage.min.js"
    integrity="sha512-HqbDsHIJoZ36Csd7NMupWFxC7e7aX2qm213sX+hirN+yEx/eUNlZrTWPs1dUQDEW4fMVkerv1PfMohR1WdFFJQ=="
    crossorigin="anonymous"
    referrerpolicy="no-referrer"
  ></script>
  <script>
    new fullpage("#fullpage", {
      //options here
      autoScrolling: true,

      afterLoad: function (anchorLink, index) {
        let skillsTl = gsap.timeline();

        skillsTl
          .from(".line", { width: 1, duration: 1 }, "-=1");
      },
    });
  </script>
</html>

style.css

.section {
  text-align: center;
  position: relative;
}

.line {
  height: 10px;
  background: black;
  width: 500px;

  margin: 0 auto;
}

所以想法是从宽度 0 到宽度 100%（即 500px）加载条形图的动画。上面的代码有效。但是，当您从第一页滚动到第二页时，您可以看到该栏仍然可见。整页滚动完成后，栏将消失，动画将开始。

我希望栏在滚动开始时不可见，以提供更流畅的动画。我怎样才能做到这一点？在此先感谢您。

如何在执行 gsap 动画之前不显示内容 (fullpage.js)

0 个答案: