为什么动画不会在屏幕加载 0.5 秒后消失？

Question

我希望动画一加载就消失 0.5 秒。

codepen.io/codemakker/pen/abJpwjr

感谢您的帮助！

Answer 1

我不确定你是否想让组消失，但如果你只是想让组在动画完成后消失并在 0.5 秒后重新出现，你可以添加以下代码：

const svg = document.querySelector('svg') // selecting entire svg group

setTimeout(() => {
  svg.style.opacity = 0

  setTimeout(() => {
    svg.style.opacity = 1
  }, 500)
}, 3000)

在这个例子中，我在 setTimeout 中使用了 setTimeout。动画需要 3 秒，所以我确保在动画结束之前不要将 svg 的不透明度设置为 0。一旦 svg 的不透明度为 0，我们可以使用另一个 setTimeout 在 0.5 秒后将其不透明度设置回 1。

奖金：

解决这个问题的更优雅的方法是使用 Promises 而不是使用上面的嵌套回调。为此，您可以创建一个自定义延迟函数，在指定的时间后 returns 承诺。然后你可以在异步函数中使用那个延迟函数，它会等待每个延迟函数完成执行，然后再转移到其他任务。

代码如下：

const svg = document.querySelector('svg')

// delay function returns Promise after "ms" amount of time
const delay = (ms) => new Promise(
    (resolve, reject) => setTimeout(resolve, ms)
)

// this is the asynchronous function that would execute the animation
const blinkSvg = async () => {
  await delay(3000) // wait for 3s/3000ms before moving to next line
  svg.style.opacity = 0

  await delay(500)
  svg.style.opacity = 1
}

blinkSvg()

为什么动画不会在屏幕加载 0.5 秒后消失？

Why doesn't the animation disappear as the screen loads on it for 0.5 seconds?

javascript

loader