Невозможно динамически установить трансляцию исходного элемента перед переходом в тот же стек вызовов

Question

Если я запускаю что-то вроде этого:

var div1 = document.getElementById('div1'),
    div2 = document.getElementById('div2');

function setAnimation() {
    div1.style.webkitTransform = 'matrix(1,0,0,1,1200,0)';
    div2.style.webkitTransform = 'matrix(1,0,0,1,0,0)';
    div1.style.webkitTransition = div2.style.webkitTransition = '-webkit-transform 2s ease';
}

function startAnimation() {
    div1.style.webkitTransform = 'matrix(1,0,0,1,0,0)';
    div2.style.webkitTransform = 'matrix(1,0,0,1,-1200,0)';
}

 setAnimation();
startAnimation();​

div2 отлично анимирует за кадром, но div1 остается на своем месте в 0,0, а изменение никогда не видится.

Если явообще удалите startAnimation и измените setAnimation на:

function setAnimation() {
    div1.style.webkitTransform = 'matrix(1,0,0,1,500,0)';
    div2.style.webkitTransform = 'matrix(1,0,0,1,-500,0)';
    div1.style.webkitTransition = div2.style.webkitTransition = '-webkit-transform 2s ease';
}

Я бы хотел, чтобы оба элемента анимировались в этих позициях, начиная с 0,0.

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

Почему это так?

Answer 1

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

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

• offsetTop, offsetLeft, offsetWidth, offsetHeight
• scrollTop, scrollLeft, scrollWidth, scrollHeight
• clientTop, clientLeft, clientWidth, clientHeight
• getComputedStyle () (currentStyle в IE)

Так что просто измените свою первую функцию на это:

var computedStyles = [];

function setAnimation() {
    div1.style.webkitTransform = 'matrix(1,0,0,1,1200,0)';
    div2.style.webkitTransform = 'matrix(1,0,0,1,0,0)';

    // force div's 1 and 2 to reflow
    computedStyles[div1] = div1.clientHeight;
    computedStyles[div2] = div2.clientHeight;
}

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

Из-за некоторых головных болей, которые могут возникнуть при попытке решить подобные проблемы перекомпоновки / перекраски, я всегда советую использовать CSS-анимацию, даже если вам нужно динамически создавать и удалять правила стилей из таблицы стилей с помощью CSSOM. Подробнее здесь: программно изменяющие значения преобразования webkit в правилах анимации