минимальный интервал между установкой перехода css

Question

Я хочу установить сразу некоторое свойство css для некоторого значения, а затем начать переход от этого значения к другому. Мне нужно позвонить это несколько раз. Когда я запускаю в первый раз, или я делаю это шаг за шагом на консоли, он работает так, как ожидалось, однако, когда он выполняется в одной функции javascript, он не работает, если я не заставляю задержку использовать setTimeout.

Запуск на консоль построчной линии работает, но называется все сразу не:

el.style.transition = ''; // no transition from now 
el.style.left = '50px'; // set instantly to 50 
el.style.transition = '1s'; // 1s transition from now 
el.style.left = '250px'; // animate from 50 to 250 

Вот jsfiddle дем.

Итак, вопрос является - как обновить переход CSS, чтобы убедиться, что он будет работать, и/или когда я обновляю переход CSS, как я знаю, если/когда он начал влиять на другие свойства, я хотел бы анимировать?

Update:

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

Answer 1

У меня есть решение (http://jsfiddle.net/9wsrv0mg/9/).

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

Таким образом, это будет работать:

el.style.transition = ''; 
el.style.left='50px'; 
var tmp = el.offsetLeft; // HERE COMES THE MAGIC - reading this prop forces delay we need 
el.style.transition = 'left 1s'; 
el.style.left='250px'; 

Answer 2

Установить переход:

el.style.transition="left 1s linear 1s".

Вам необходимо использовать свойство CSS3 transition-delay, но вы можете установить его в более широком transition свойства, которые вы использовали. Это позволяет установить несколько параметров перехода, четвертым из которых является время задержки.

Формальный синтаксис: [none | < single-transition-property>] || < время> || < временная функция> || <

См. Это fiddle. Первоначально вам требуется небольшая задержка для перехода, чтобы не влиять на предыдущее изменение стиля. Обратный вызов для изменения свойства стиля отсутствует, поэтому вам нужно просто принудительно обновить элемент перехода в следующем цикле событий браузера. Также было отмечено ответ this.

el.style.transition = 'left 0s linear 0s'; // no transition from now 
el.style.left = '50px'; // set instantly to 50 
setTimeout(function(){ 
    el.style.transition = 'left 1s linear 1s'; // 1s transition from now 
    el.style.left = '250px'; // set instantly to 50 
}, 0);