Почему, если анимация не завершилась, круги появляются сразу?

Question

[Tdvist]

Если кликать по кнопке до завершения прошлой анимации, следующий круг появляется моментально почему??

function showCircle(radius) {
    let div = document.createElement('div');
    div.style.width = 0;
    div.style.height = 0;
    div.style.left = Math.round( document.documentElement.clientWidth * Math.random() )+ 'px';
    div.style.top = Math.round( document.documentElement.clientHeight * Math.random() ) + 'px';
    div.className = 'circle';
    document.body.append(div);

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

Функция создания круга в рандомной области

  button.onclick = go

  function go() {
    showCircle(150)
  }

.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%;
    }

<button id="button">Click me</button>

Comments

[eugenedrvnk]

лучше сделать пример на каком-то кодпене, jsfiddle и т.д., дабы с ходу нагляднее было

[Максим]

.onanimationend - добавляете следующий

[Максим]

eugenedrvnk, специально переделал - смотрите : https://codepen.io/topicstarter/pen/dyYdKQO?editor...

Answer 1

[DmitryOlkhovoi]

У вас нет слушателя на окончание анимации