Переход CSS зависит от порядка назначения стиля

Question

Попытка сделать контейнер с текстом постепенно расширяется при добавлении к нему нового текста, я использовал свойство css transition. Точно, я фиксирую текущую ширину, добавляю текст, а затем отпускаю ширину. JS код выглядит следующим образом:

footer.style['max-width'] = footer.offsetWidth + 'px' 
footer.innerHTML += ' additional text' 
footer.style['max-width'] = '500px' 

с этим CSS для footer:

overflow: hidden; 
text-overflow: clip; 
white-space: nowrap; 

Это did't работу. Пытаясь найти обходной путь, я добавил еще одну строку кода:

footer.style['height'] = footer.offsetHeight + 'px' 

Теперь, когда эта линия будучи поставлен перед присвоением max-width (так в начале фрагмента кода), она не работает. Но поместив его после этой строки (делая ее второй строкой) - делает. Вопрос в том, почему? и каков правильный способ работы с переходами? (?, Но в основном, почему)

Fiddle испытан в светлячок 40,0 и 39,0 хром: http://jsfiddle.net/53dbm6vz/

Answer 1

Вполне вероятно, что проблема заключается в том, что оба ваших footer.style['max-width'] заданий происходят внутри одной синхронной работы. Браузер (ы), вероятно, полностью игнорируют промежуточное значение.

Она может быть решена, если разделить операцию на 2-х частей:

1. Установите ширину инициализации и ...
2. Использовать setTimeout, чтобы вызвать фактическое назначение.

Попробуйте так:

footer.style['max-width'] = footer.offsetWidth + 'px' 
window.setTimeout(function() { 
    footer.innerHTML += ' additional text' 
    footer.style['max-width'] = '500px' 
}, 0)