Почему не работает свойство transition у элементов без фиксированной ширины?

Question

[Petr Erokhin]

Добрый вечер!

Недавно столкнулся с такой проблемой. Если у блока не задана ширина, то не получится сделать плавной анимации увеличения (а в последующем и уменьшения обратно) ширины этого блока. Вот пример на codepen.

Пробовал через функцию animate jq. Указывал при наведении width 100%, при потере фокуса width: auto. Получается только плавно увеличить блок, при потере фокуса ничего не происходит, блок так и остаётся на 100%.

Answer 1

[DTX]

The CSS WG has resolved that transitions don't run to/from auto values.

https://bugs.webkit.org/show_bug.cgi?id=16020

Если нужно решение, то вот оно:
n12v.com/css-transition-to-from-auto

Comments

[Petr Erokhin]

Проблему решил с помощью jq. Выставил элементам ширину, чтобы transition отрабатывал корректно. Если кому интересно, то вот что в итоге получилось.