使用 async/await 暂停 GSAP Flip 动画

Question

我正在使用 GSAP 的 Flip 插件来制作从屏幕角落到中心的加载动画，然后在页面加载时返回。我认为这样做的一个好方法是使用 async/await 暂停脚本，直到切换 hide_logo_animation 布尔值。

这是我的尝试（使用正方形代替），但它什么也没做。没有错误所以我不知道如何调试它。

我在这里做错了什么？我希望它会翻转两个方块的位置并等待我切换 hide_logo_animation 后再切换回来。

<div class="container">
  <div class="square" id="sq1">1</div>
  <div class="square" id="sq2">2</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"></script>
<script src="https://assets.codepen.io/16327/Flip.min.js"></script>

body {
  background-color: #222;
  font-family: "Signika Negative", sans-serif, Arial;
}

.container {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
}

.square {
  width: 100px;
  height: 100px;
  font-size: 3em;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  color: black;
  background-color: #88ce02;
  cursor: pointer;
}

gsap.registerPlugin(Flip);

var hide_logo_animation = false
showLogoAnimation(hide_logo_animation)

async function showLogoAnimation(hide_logo_animation) {
    const logo_state = Flip.getState("#sq1", {})
    Flip.from(logo_state, {
        targets: '#sq2',
        duration: 0.75,
        ease: "power1.inOut"
    })
    await hide_logo_animation
    const logo_animation_state = Flip.getState("#sq2", {})
    Flip.from(logo_animation_state, {
        targets: '#sq1',
        duration: 0.75,
        ease: "power1.inOut"
    })
}

编辑：这是一个 Codepen/minimal 示例，展示了我正在尝试做的事情。 div 词立即更改为“随机”，但我希望它等到我切换 bool is_word_random。

我也愿意接受其他方法。我更愿意使用全局事件侦听器来等待值发生变化，但我找不到这样做的示例。我发现监听变量更改的唯一方法是 get/set 我被告知已过时，应该使用 async/await 来代替？

https://codepen.io/TheNomadicAspie/pen/qBmYEeJ

<div id="word">Word</div>

#word {
  font-size: 50px;
}

var is_word_random = false;
makeWordRandom();
waitFiveSeconds();

async function makeWordRandom() {
  await is_word_random;
  word.innerText = "Random";
}

function waitFiveSeconds() {
  setTimeout(() => {
    is_word_random = true;
  }, 5000);
}

Answer 1

在这种情况下，它有助于对核心问题进行更多最小化的演示。在这种情况下，也许这个最小的 JS 代码可以帮助您理解问题：

let myBool = false;
myFunc(myBool);

async function myFunc(bool) {
  console.log(bool);
  await bool;
  console.log("This fires immediately");
}

如您所见，您的await 只是在等待一个布尔类型的变量。 await 与 Promise 一起使用（包括使用 Promise.all() 做出的承诺或从函数返回的承诺）。所以这是你的问题。

如果你想使用async/await，我建议从makeWordRandom函数调用wait函数并从waitFiveSeconds返回一个promise：Demo。

---

我不确定您为什么要在这里使用异步函数。每当您计划切换布尔值时，我可能会在加载时调用函数的第一部分，然后调用第二部分。像这样：

function showLogoAnimation() {
    const logo_state = Flip.getState("#sq1", {});
    Flip.from(logo_state, {
        targets: '#sq2',
        duration: 0.75,
        ease: "power1.inOut"
    });
}

function hideLogoAnimation() {
  const logo_animation_state = Flip.getState("#sq2", {});
  Flip.from(logo_animation_state, {
      targets: '#sq1',
      duration: 0.75,
      ease: "power1.inOut"
  });
}

showLogoAnimation();

// Whenever you were changing the boolean, just call hideLogoAnimation() instead