在下面的代码中使用`setTimeout`? [重复]

问题描述 投票:1回答:1

这个问题在这里已有答案:

我注意到当我从下面的代码中删除setTimeout时,动画停止工作。有人可以向我解释一下发生了什么事吗?

为什么有必要在这里插入这个setTimeout,即使时间值是0?在我看来,它应该立即执行,所以为什么插入setTimeout(cb,0)

setTimeout(() => {
... //see below for code
}, 0);


<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <style>
    .message-ball {
      font-size: 20px;
      line-height: 200px;
      text-align: center;
    }
    .circle {
      transition-property: width, height, margin-left, margin-top;
      transition-duration: 2s;
      position: fixed;
      transform: translateX(-50%) translateY(-50%);
      background-color: red;
      border-radius: 50%;
    }
  </style>
</head>

<body>

  <button onclick="go()">Click me</button>

  <script>

  function go() {
    showCircle(150, 150, 100, div => {
      div.classList.add('message-ball');
      div.append("Hello, world!");
    });
  }

  function showCircle(cx, cy, radius, callback) {
    let div = document.createElement('div');
    div.style.width = 0;
    div.style.height = 0;
    div.style.left = cx + 'px';
    div.style.top = cy + 'px';
    div.className = 'circle';
    document.body.append(div);

    setTimeout(() => {
      div.style.width = radius * 2 + 'px';
      div.style.height = radius * 2 + 'px';

      div.addEventListener('transitionend', function handler() {
        div.removeEventListener('transitionend', handler);
        callback(div);
      });
    }, 0);
  }
  </script>


</body>
</html>
javascript settimeout
1个回答
3
投票

因为转换仅在属性更改时发生。如果你这样做

 div.style.width = 0;
 div style.width = "1000px";

由于房产直接改变,因此无法制作任何动画。如果您推迟第二次更新,它将检测到更改并导致转换发生。

© www.soinside.com 2019 - 2024. All rights reserved.