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

Question

我已经从 Gsap 实现了 TweenMax 并制作了一个登录页面介绍，其中加载容器，有三个 div，其中包含三个 h5 元素，使用绝对定位在中心。首先，我将 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>

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

Answer 1

可能比上面的设置更简单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

Answer 2

有一个计时问题，可能在 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>

注意：运行nning 作为一个 SO 片段也会有不同的时间考虑，因此此代码需要运行直接在浏览器中进行正确测试：

<!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>

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

Tweenmax opacity remains 1 for a brief moment when page reloads

html

javascript

css

gsap