jquery - CSS トランジションが toggleClass() 後に機能しない

Question

このデモに示すように、トグル メニューを作成しました。

に CSS トランジション効果を追加しましたが、div.nav-menu以前max-height:0;はmax-height:480px;.

メニュートグルをクリックしてメニューを表示すると、トランジションがうまく機能します。しかし、メニュートグルをクリックしてメニューを再度非表示にすると、トランジションが機能しません。

私は何を間違えましたか？