Почему этот переход CSS3 не запущен?

Question

У меня есть <div> класса spoiler с дополнительным классом collapsed что ограничивает его высоту.
Однако, когда я добавляю и удаляю collapsed класс, переход CSS3 для height не уволен.

div.spoiler { height: auto; transition: height 2s ease; }
div.spoiler.collapsed { height: 4px; overflow: hidden; }

Я нашел этот онлайн-ресурс, который делает то же самое, используя jQuery (я использую Dojo), который работает: http://www.impressivewebs.com/css3-transitions-javascript/

Скрипка: http://jsfiddle.net/2Cnxv/

Как мне получить переход на работу?

Answer 1

На это уже ответили где-то еще.

Вы не можете перевести высоту с числового значения на автоматическое (или наоборот).

Один из обходных путей, который заключается в том, чтобы перенести максимальную высоту, установив ее достаточно высоко (проблема в том, что вы должны угадать это число)

div.foo { height: auto; 
    max-height: 30px;
    border: 1px solid red; 
    transition: max-height 2s ease; }
div.foo.bar { 
    max-height: 4px; 
    overflow: hidden; }