Как заставить transition работать?

Question

[Роман Макаров]

Есть примерно такая структура

<div class="main">
    <div>someContent</div>
    <div style="display: none"></div>
                ...
    <div style="display: none"></div>

css:

.main {
    min-width: 300px;
    transition: all .3s ease-out;
}

Т.е. блок по-умолчанию содержит только 1 видимы элемент, по клику делаю все элементы видимыми, width меняется, но не меняются css правила влияющие напрямую на width.
Сейчас при добавлении контента ширина меняется сразу, без transition.
Возможно ли сделать расширение блока плавным?

Answer 1

[Nikolay Talanov]

1) Не стоит точка с запятой после min-width: 300px, это даже тостер подсвечивает.
2) Нет такого изинга easy-out, есть ease-out.

Comments

[Роман Макаров]

Этот код я написал для иллюстрации примера, есть абсолютно валидный аналогичный код, который я не стал писать, чтобы опустить большое количество деталей

[Nikolay Talanov]

Роман Макаров: прочел ваше описание 2 раза но так и не понял что конкретно не работает.

[Роман Макаров]

поправил описание

[Nikolay Talanov]

Роман Макаров: Если вы элемента меняете свойство display с none на block(или еще какое), то транзишен не сработает. Надо либо менять ширину с помощью нулевого таймаута, либо триггерить лэйаут, например так.
$element.show();
$element.css("top");
$element.width(321123);

После такого анимация ширины будет плавной. Я год назад почти отвечал тут на тостере про все это дело, там подробнее описано, можете поискать.

[Nikolay Talanov]

Роман Макаров: Как временно убрать css transition? тут если что

[Роман Макаров]

Nikolay Talanov: то, что вы пишете - очевидно. Вопрос в том, можно ли заставить работать transition, не задавая статичную ширину элемента. (т.к. она неизвестна)