css - 高さ自動へのCSS3トランジションは最初に高さ0になります

Question

私は次のCSSを持っています:

.foo
{
    height:100px;
    overflow:hidden;
    -webkit-transition: height 200ms;
    -moz-transition: height 200ms;
    -o-transition: height 200ms;
    transition: height 200ms;
}

.foo.open
{
    height:auto;
}

.foo自動高さがある場合、コンテンツによっては高さが ~550px になります。

jQuery を使用してクラスを追加するopenと、CSS3 トランジションを使用して 200 ミリ秒で高さが 100px から ~550px に変化することが期待されます。

ただし、正確には、高さが 100px から 0px に変化し、その後 ~550px にジャンプします。

-- ライブデモを見る --

代わりに に変更.openするとheight:550px、これは正常に機能しますが、コンテンツの長さが異なるため、高さを固定ピクセルの高さではなく自動に設定する必要があります。

~550px にスライドするのではなく、div が閉じるのはなぜですか? また、このアニメーションの問題を解決するにはどうすればよいですか?