使用 setTimeout 链接承诺

Question

我有一个试图隐藏的“加载”动画，然后我需要淡入淡出一些其他文本和按钮。下面的代码是我目前所拥有的，但 FROM alpine:latest WORKDIR /data COPY --from=cython-compile /tmp/cython . 函数中的代码在 then 完成之前执行，这导致我的其余元素以错误的顺序显示和隐藏自己。

我在这里做错了什么？

这是一个显示问题的代码笔： https://codepen.io/TheNomadicAspie/pen/OJmzpXy

hideLogoAnimation

Answer 1

即使您当前的解决方案将满足用例，您也可以从使用动画库中受益。您遇到的问题已经解决了 GSAP https://greensock.com/gsap 和 AnimeJS https://animejs.com

时间轴是您要按顺序播放动画的内容： https://greensock.com/docs/v3/GSAP/Timeline https://animejs.com/documentation/#timelineBasics

使用动画库的优点是：

1. 他们已经在考虑性能的情况下解决了许多复杂的动画问题
2. 它们提供了一种标准的动画方式，因此其他开发者无需学习您的代码，但可以使用现有文档

缺点：

1. 在使用它们之前你必须学习它们的 API
2. 它们是下载的额外依赖项（它们很小，但仍然）

Answer 2

在Promise中，您不会调用resolve或reject回调来触发then()或catch()，因此在您的情况下，您必须在setTimeout中添加/删除fadein/fadeout后调用resolve。