Переход CSS не запускается или обратный вызов не вызывается

Сводка проблемы

Позиция элемента HTML обновляется с помощью переходов CSS. Однако переход не срабатывает или функция обратного вызова не вызывается, несмотря на добавление прослушивателя событий перехода перехода. Эту проблему можно решить, обернув изменение с помощью setTimeout(1ms).

Объяснение решения

Причина такого поведения кроется в процессе рендеринга браузера. Прежде чем браузер сможет применить переход CSS, он должен сначала применить к элементу встроенные стили. Если элемент еще не находится в DOM, его вычисленный стиль отображается как "".

Когда установлен новый стиль, браузер еще не применил встроенный стиль. Таким образом, вычисленный стиль элемента остается равным "", а его левое и верхнее значения по-прежнему равны 0 пикселей.

Следовательно, когда свойство перехода применяется перед отрисовкой следующего кадра, левое и верхнее значения уже являются желаемыми. в результате чего переход не выполняется и не вызывается событие перехода.

Чтобы решить эту проблему, можно принудительно выполнить перекомпоновку с помощью метода получения Element.offsetHeight или других методов DOM, для которых требуются актуальные стили. . Это заставляет браузер обновлять стили перед применением перехода, обеспечивая плавную реализацию.

Пример

Следующий код демонстрирует проблему и способ ее решения:

document.body.innerHTML  = tablehtml;

var animdiv = document.getElementById('spanky');
animdiv.addEventListener("transitionend", function(event) {
  animdiv.style.backgroundColor = 'red';
}, false);

// force a reflow
animdiv.offsetTop;

animdiv.style.backgroundColor = 'green';
Object.assign(animdiv.style, {
  left: "100px",
  top: "100px"
});

В этом примере метод получения offsetTop элемента animdiv используется для принудительной перекомпоновки перед обновлением его позиции. Это гарантирует правильное срабатывание перехода CSS и вызов функции обратного вызова.