Как исчезнуть и вставить элемент, затем исчезнуть и удалить элемент? ⇐ CSS

[Anonymous]

Описание
У меня есть , что при нажатии один раз устанавливает класс элемента для «исчезания» и вставляет элемент в DOM. Это визуально исчезает в элементе после введения в DOM. Когда кнопка снова нажимается, кнопка устанавливает класс элемента на «Fade-out», ожидает с SetTimeout () и удаляет элемент из DOM. Это визуально исчезает элемент перед удалением из Dom.
проблема
Если элемент находится в DOM (после клики один раз), и я перехожу дважды в быстром последовательности, а затем элемент> исчезает, а затем исчезает, а затем искажает, а затем исчезает, а затем (затем исчезает. /> ожидаемый результат
Я бы хотел, чтобы элемент от первого щелчка исчезает и удалялся из DOM, а затем, со второго щелчка, исчезает и восстанавливается в DOM. То есть элемент должен быть в DOM и 2) отображаться визуально после быстрого нажатия дважды, когда кнопка уже нажата один раз. Мое предположение состоит в том, что, поскольку второй щелчок происходит до завершения setTimeout () , контейнер «вставлен» (хотя он уже вставлен) в DOM до выполнения кода в SetTimeout () (который удаляет из DOM). Второе событие Click Click) выполняется после события setTimeout () (происходит в первом событии щелчков мыши)?
code
Прикреплен ниже, минимальный воспроизводимый пример моей проблемы.

const container = document.createElement("div");

let toggled = false;

const button = document.querySelector("button");
button.addEventListener("click", event => {
toggled = !toggled;
if (toggled) {
container.setAttribute("class", "fade-in");
button.parentElement.insertBefore(container, button.nextSibling);
} else {
container.setAttribute("class", "fade-out");
setTimeout(() => {container.remove();}, 500)
}
})< /code>
div {
width: 100px;
height: 100px;
background-color: black;
}

.fade-in {
animation: fade-in 500ms linear;
}

@keyframes fade-in {
0% {
opacity: 0;
}

100% {
opacity: 1;
}
}

.fade-out {
animation: fade-out 500ms linear;
}

@keyframes fade-out {
0% {
opacity: 1;
}

100% {
opacity: 0;
}
}< /code>








Document


Fade In / Fade Out


< /code>
< /div>
< /div>
< /p>
Я пытался использовать обещания, но, к сожалению, ни одна из моих попыток не сработала. Поскольку я новичок в JavaScript, я не уверен, использую ли я это неправильно, или у моего подхода есть недостатки.
Заранее!

Подробнее здесь: https://stackoverflow.com/questions/731 ... ve-element