menue с css переходами не работает, как ожидалось

Question

У меня есть меню с css переходами и css. Это построено так: В главном div темы есть еще один div с содержанием тем. Когда я хочу показать это, (onclick), я добавляю класс в главный div, который содержит height: auto; На самом деле он работает как за исключением, НО перед тем, как установить на правильную высоту, div устанавливает его высоту на 0. Зачем это происходит? Кто-нибудь знает, как этого избежать?

Heres код:

html: 
<div class="class1" onclick="this.className='class1 class2'"> 
    test topic: (click here) 
    <div> 
     <ul> 
      <li>test</li> 
      <li>test</li> 
      <li>test</li> 
     </ul> 
    </div> 
</div> 

css: 
class1{ 
    height: 35px; 
    overflow: hidden; 
    transition: all 2s; 
} 
class2{ 
    height: auto; 
} 

Heres в jsfiddle.

И вот homepage. (Чтобы проверить это, НАЖМИТЕ прав ...)

Answer 1

Это было покрыто раньше: How can I transition height: 0; to height: auto; using CSS?, CSS transition auto height not working, CSS3 transition to height auto goes to height 0 first, http://css3.bradshawenterprises.com/animating_height/

Похоже, работа вокруг использовать макс-высота вместо высоты, и для вашего перехода установите максимальную высоту, а не height: auto. Просто будьте осторожны, если вы установите максимальную высоту, намного превышающую высоту, время вашего перехода будет сброшено.

.class2{ 
    max-height:200px; 
} 

Demo с помощью скрипку: http://jsfiddle.net/Jag96/SwWXm/