页面重新加载时，Tweenmax 不透明度会在短时间内保持为 1答案

【问题标题】：Tweenmax opacity remains 1 for a brief moment when page reloads页面重新加载时，Tweenmax 不透明度会在短时间内保持为 1
【发布时间】：2021-08-20 21:08:30
【问题描述】：

我已经从 Gsap 实现了 TweenMax，并做了一个登陆页面介绍，其中加载容器，有三个包含三个 h5 元素的 div，使用绝对定位在中心。首先我做了 StaggerFrom{ opacity 0 } 到 staggerTo{ opacity 1 }。但是由于某种原因，当我重新加载页面时，我可以看到所有三个 h5 元素相互堆叠了几毫秒。

https://codepen.io/pranaymajee/pen/PomMaVM

在 codepen 上似乎可以正常工作，但在我的浏览器上却不行。

TweenMax.to(
  ".loadcon",
  2, {
    y: "-100%",
    ease: Expo.easeInOut,
    delay: 6,
  },
);


TweenMax.staggerFrom(
  ".loadtext",
  1, {
    x: "-80",
    ease: Power3.easeInOut,
    opacity: "0",
  },
  2
);
TweenMax.staggerTo(
  ".loadtext",
  0.8, {
    x: "80",
    ease: Power3.easeInOut,
    delay: 1.2,
    opacity: "0",
  },
  2
);

* {
  margin: 0;
  padding: 0;
  text-decoration: none;
  box-sizing: border-box;
  text-rendering: optimizeLegibility;
}

.loadcon{
  background-color: #000000;
  height: 100vh;
  width: 100vw;
  z-index: 10;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loadtext{
  position: absolute;
  top: 50%
  left: 50%;
  transform: translate(-50%,-50%);
}

.loadtext h5{
  font-family: "Cyrene";
  color: #fff;
  font-size: 200px;
  position: absolute;
  top: 50%
  left: 50%;
  transform: translate(-50%,-50%);
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div class="loadcon">
        <div class="loadtext">
            <h5>Learn</h5>
        </div>
        <div class="loadtext">
            <h5>Code</h5>
        </div>
        <div class="loadtext">
            <h5>Repeat</h5>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
  </body>
</html>

depen 它似乎工作正常，但它发生在我的浏览器上有什么解决办法吗？

【问题讨论】：

你正在制作the most common GSAP mistakes。我建议你修复它们！此外，没有真正的理由继续使用旧版本的 GSAP。

标签： javascript html css gsap

【解决方案1】：

有一个时间问题，这可能在 codepen 中得到了改善，因为代码是在 iframe 中运行的。

加载文本需要从不透明度 0 开始，因此它们不会在加载后立即显示，然后在调用补间最大代码之前设置为不透明度 1。

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
    * {
  margin: 0;
  padding: 0;
  text-decoration: none;
  box-sizing: border-box;
  text-rendering: optimizeLegibility;
}

.loadcon{
  background-color: #000000;
  height: 100vh;
  width: 100vw;
  z-index: 10;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loadtext{
  position: absolute;
  top: 50%
  left: 50%;
  transform: translate(-50%,-50%);
  opacity: 0;
  }
  .opacity1 {
  opacity: 1; /* ADDED */
}

.loadtext h5{
  font-family: "Cyrene";
  color: #fff;
  font-size: 200px;
  position: absolute;
  top: 50%
  left: 50%;
  transform: translate(-50%,-50%);
}
    </style>
  </head>
  <body>
    <div class="loadcon">
        <div class="loadtext">
            <h5>Learn</h5>
        </div>
        <div class="loadtext">
            <h5>Code</h5>
        </div>
        <div class="loadtext">
            <h5>Repeat</h5>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
  <script>
  const loadtexts = document.querySelectorAll('.loadtext');
  loadtexts.forEach(loadtext => {
    loadtext.classList.add('opacity1');
  });
  TweenMax.to(
  ".loadcon",
  2, {
    y: "-100%",
    ease: Expo.easeInOut,
    delay: 6,
  },
);


TweenMax.staggerFrom(
  ".loadtext",
  1, {
    x: "-80",
    ease: Power3.easeInOut,
    opacity: "0",
  },
  2
);
TweenMax.staggerTo(
  ".loadtext",
  0.8, {
    x: "80",
    ease: Power3.easeInOut,
    delay: 1.2,
    opacity: "0",
  },
  2
);

</script>
</body>
</html>

注意：作为 SO sn-p 运行也会有不同的时间考虑，因此该代码需要直接在浏览器中运行才能进行正确的测试：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
    * {
  margin: 0;
  padding: 0;
  text-decoration: none;
  box-sizing: border-box;
  text-rendering: optimizeLegibility;
}

.loadcon{
  background-color: #000000;
  height: 100vh;
  width: 100vw;
  z-index: 10;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loadtext{
  position: absolute;
  top: 50%
  left: 50%;
  transform: translate(-50%,-50%);
  opacity: 0;
  }
  .opacity1 {
  opacity: 1; /* ADDED */
}

.loadtext h5{
  font-family: "Cyrene";
  color: #fff;
  font-size: 200px;
  position: absolute;
  top: 50%
  left: 50%;
  transform: translate(-50%,-50%);
}
    </style>
  </head>
  <body>
    <div class="loadcon">
        <div class="loadtext">
            <h5>Learn</h5>
        </div>
        <div class="loadtext">
            <h5>Code</h5>
        </div>
        <div class="loadtext">
            <h5>Repeat</h5>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
  <script>
  const loadtexts = document.querySelectorAll('.loadtext');
  loadtexts.forEach(loadtext => {
    loadtext.classList.add('opacity1');
  });
  TweenMax.to(
  ".loadcon",
  2, {
    y: "-100%",
    ease: Expo.easeInOut,
    delay: 6,
  },
);


TweenMax.staggerFrom(
  ".loadtext",
  1, {
    x: "-80",
    ease: Power3.easeInOut,
    opacity: "0",
  },
  2
);
TweenMax.staggerTo(
  ".loadtext",
  0.8, {
    x: "80",
    ease: Power3.easeInOut,
    delay: 1.2,
    opacity: "0",
  },
  2
);

</script>
</body>
</html>

【讨论】：

非常感谢！它现在工作。是的，我也尝试了 GitHub 存储库上的旧代码，但它也无法正常工作。但现在是:)

【解决方案2】：

可能比上述设置 opacity:0 更简单

.loadtext{
  position: absolute;
  top: 50%
  left: 50%;
  opacity:0;
  transform: translate(-50%,-50%);
}

然后更改您的 staggerTo() 和 staggerFrom() 函数

TweenMax.to(".loadcon",
  2, {
    y: "-100%",
    ease: Expo.easeInOut,
    delay: 6,
  },
);

TweenMax.staggerTo(
  ".loadtext",
  1, {
    x: "80",
    ease: Power3.easeInOut,
    opacity: "1",
  },
  2
);
TweenMax.staggerFrom(
  ".loadtext",
  0.8, {
    x: "-80",
    ease: Power3.easeInOut,
    delay: 1.2,
    opacity: "0",
  },
  2
);

.loadedText{} 和 .loadedtext h5{} 之间还有很多重复的 CSS，这是不必要的。

https://codepen.io/non_tech_guy/pen/qBmeJOj

【讨论】：

实际上这是我项目中的代码 sn-p 这就是为什么这里不需要某些行的原因。我之前尝试过您的解决方案，但没有得到想要的结果。
它对我有用，我已经更新了我的答案以包括动画示例和 codepen 的链接。
我没有 h5 元素的堆叠，正如您在我的 codepen 示例中的问题中所报告的那样。
创建本地 HTML CSS JS 文件时会出现该问题。 Codepen 使用 iframe 来显示结果，这就是看不到问题的原因。
请参阅https://github.com/NonTechGuy/opacity-tweenmax，如果您在分支之间交换并在浏览器中反复刷新 index.html，您将看到在您的代码 pranaymajee 分支上存在 h5 元素的堆叠。然后切换到nontechguy分支，反复刷新index.html，就会看到h5元素的堆叠不存在了。