CSS3 переходы с toggleClass

Question

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

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

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

Answer 1

Это работает:

http://jsfiddle.net/Eric/XcFxQ/2/

Хотя высота не строго автоматическая. Он вручную устанавливает высоту для анимации.

Answer 2

Я смог заставить его работать правильно без свойства -webkit-transition-property и вместо этого использовать jQuery 1.7 с пользовательским интерфейсом jQuery, как в этой скрипте:

http://jsfiddle.net/pjFAt/

В моем тестированииэто дало самые чистые, самые надежные результаты.

Теперь я не уверен, хотите ли вы включить jQuery UI на свою веб-страницу.Если нет, то я думаю, что вам, возможно, придется обойти недостатки рендеринга, используя еще немного Javascript (т.е. если hasClass, затем animate и т. Д.) *