Несогласованная CSS-анимация с использованием JavaScript в ответ на прослушиватель событий щелчка. ⇐ CSS

[Anonymous]

Я работаю над процедурой, которая изменяет порядок набора элементов div на HTML-странице с помощью JavaScript. Изменение порядка работает правильно.
Чтобы добавить визуальную обратную связь при перемещении элемента div, я использую добавляемый класс CSS-анимации (и ключевых кадров).
Каждый элемент div имеет стрелки вверх и вниз с прослушивателем событий.
Функция «Вверх» работает всегда. Функция «Вниз» срабатывает ровно один раз, если не используется кнопка «Вверх». В этом случае функция «Вниз» сбрасывается и работает только один раз.
Весь эксперимент проводится в автономном режиме. PHP-файл:

Код: Выделить всё

[*]
Reorder List

.component {
margin-bottom: 4px;
font-size: 16px;
border: 1px solid black;
border-radius: 5px;
}

.component button {
margin: 2px;
padding: 2px;
border-radius: 5px;
border: 1px solid grey;
font-size: 24px;
}

.component span {
margin-left: 10px;
}

.container {
border: 1px solid red;
padding: 5px;
border-radius: 5px;
}

.internal {
clear: both;
display: block;
margin-left: 15px;
}

.fade-in {
animation: fadeIn 1s ease-in-out;
}

@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}





[[url=/experiments/]Experiments Home[/url]]

This page demonstrates:

[list]
Reordering child divs of a parent div using JavaScript.
[*]The order set by JavaScript is retained in a POST request.
[/list]








arrow_upward
arrow_downward


Подробнее здесь: [url]https://stackoverflow.com/questions/79314220/inconsistent-css-animation-using-javascript-in-response-to-a-click-event-listene[/url]