Как добавить классы так, чтобы они были обработаны браузером по отдельности?
Сниппет с фидла:
Силами CSS создана простая анимация из двух шагов. Классы right и center по очереди меняют свойство transform: translateX. Добавление класса center обёрнуто в setTimeout(callback, 0).
Проблема в том, что применение setTimeout(callback, 0) не гарантирует, что классы будут применены по отдельности. Если повторять анимацию, то рано или поздно между добавлением первого и второго класса не произойдёт Recalculate Style в браузере и анимация вообще не начнётся.
Вопрос в том, как добиться того, чтобы браузер запускал Recalculate Style между присвоением этих классов? Увеличить таймер в setTimeout?
Вопрос не о том, как можно сделать эту анимацию другими путями.
Для того, чтобы форсировать Recalculate Style между присвоением классов достаточно обратиться к свойству изменяемого элемента offsetHeight или $(elem).outerHeight() (для jQuery).
Это убирает необходимость использовать костыли в виде setTimeout в сниппете выше.
Для правильного вопроса надо знать половину ответа
Классы у вас не меняют друг друга, а просто устанавливаются. В результате, после второго вызова addClass установлены оба класса и больше ничего не меняется.
А для отслеживания transition есть набор событий. https://developer.mozilla.org/en-US/docs/Web/API/H...
А с чего вы взяли, что классы будут менять друг друга? Они же не удаляются в сниппете.
Если бы они применялись одновременно, то анимация не начиналась бы. Да, можно проверять transitionstart, но вопрос в том: "как добиться того, чтобы браузер запускал Recalculate Style между присвоением этих классов", потому что это и гарантирует, что анимация сработает.
