Откуда задержка у transition при обратном действии?

Question

[Николай]

При первом нажатии на "выбрать марку" сразу появляется выпадающий список, а при повторном - происходит задержка где-то в секунду.
Вот пример: https://jsfiddle.net/cjw4fkq5/

Откуда берётся эта задержка при повторном клике, и как её убрать?

Answer 1

[0xD34F]

Вы выставляете max-height равным 600, в то время как высота элемента - всего 50. Так что пока max-height уменьшается с 600 до 50, внешне ничего не меняется.

UPD. Как исправить. Могу предложить два варианта:

1) Менять max-height не у ul, а у li. Это позволит назначить конкретную высоту элементов. Типа так.

2) Для открытого состояния также определить transition: max-height. Подобрать временные функции так, чтобы при открытии списка сначала он разворачивался медленно, а в конце быстро. А при закрытии наоборот - сначала быстро, затем медленно. Типа так.

Comments

[Николай]

и как тогда быть? Ведь я заранее не знаю высоту элемента :(

[0xD34F]

Николай, дополнил ответ.

[Николай]

0xD34F, благодарю!

Answer 2

[Владимир Юрченков]

Попробуйте поставить функцию all.

А вообще убрал анимацию всех браузеров и добавил только, вроде исчезла задержка:

transition: 1s all;

Comments

[Николай]

Не помогло :(