Как добавить классы так, чтобы они были обработаны браузером по отдельности?

Question

[Максим]

Сниппет с фидла:


Силами CSS создана простая анимация из двух шагов. Классы right и center по очереди меняют свойство transform: translateX. Добавление класса center обёрнуто в setTimeout(callback, 0).

Проблема в том, что применение setTimeout(callback, 0) не гарантирует, что классы будут применены по отдельности. Если повторять анимацию, то рано или поздно между добавлением первого и второго класса не произойдёт Recalculate Style в браузере и анимация вообще не начнётся.

Вопрос в том, как добиться того, чтобы браузер запускал Recalculate Style между присвоением этих классов? Увеличить таймер в setTimeout?

Вопрос не о том, как можно сделать эту анимацию другими путями.

Answer 1

[Максим]

Для того, чтобы форсировать Recalculate Style между присвоением классов достаточно обратиться к свойству изменяемого элемента offsetHeight или $(elem).outerHeight() (для jQuery).
Это убирает необходимость использовать костыли в виде setTimeout в сниппете выше.

Answer 2

[Rsa97]

Классы у вас не меняют друг друга, а просто устанавливаются. В результате, после второго вызова addClass установлены оба класса и больше ничего не меняется.
А для отслеживания transition есть набор событий. https://developer.mozilla.org/en-US/docs/Web/API/H...

Comments

[Максим]

А с чего вы взяли, что классы будут менять друг друга? Они же не удаляются в сниппете.

Если бы они применялись одновременно, то анимация не начиналась бы. Да, можно проверять transitionstart, но вопрос в том: "как добиться того, чтобы браузер запускал Recalculate Style между присвоением этих классов", потому что это и гарантирует, что анимация сработает.