CSS3-переходы с toggleClass

У меня свойство -webkit-transition-duration задано для элемента div, высота которого задается другим классом. Когда я использую jQuery для переключения класса, переход делает что-то странное.

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

Вот демонстрация: http://jsfiddle.net/XcFxQ/1/