Почему анимация работает только со второго раза [дубликат] ⇐ CSS

[Гость]

Пожалуйста, посоветуйте мне. Почему переход собственности срабатывает только с 2-х раз. В 1-й раз квадрат как бы "телепортировался". Код прилагаю

Я ожидал, что анимация заработает с первого раза...
h1 { оформление текста: подчеркивание; } .квадрат { переход: все 1 с ослаблением; цвет фона: красный; ширина: 2рем; высота: 2рем; положение: относительное; } тело { размер коробки: граница-коробка; } const Square = document.querySelector(".square"); const button = document.querySelector(".button"); console.log(window.innerWidth); пусть позиция = 0; const onClick = (эл) => { кнопка.отключено = правда; если (позиция === 0) { el.style.setProperty("left", "calc(100% - 2rem)"); позиция = 1; setTimeout(() => { кнопка.отключено = ложь; }, 1000); возвращаться; } el.style.setProperty("слева", "0"); позиция = 0; setTimeout(() => { кнопка.отключено = ложь; }, 1000); возвращаться; }; button.addEventListener("click", () => { onClick (квадрат); });