Анимация раскрытия списка JS+CSS по щелчку
 

Сделано дерево в списках ul li, канонично, в общем. Класс .tree_menu ul - по умолчанию для всех не коренных UL. Класс ul.menu_hide вешается на все некоренные UL и их, соответственно не видно. Разница там только в max-height как видите:


Кусок хтмля.

<li id="menu4"><a href="#">Категория</a>
	<ul class="menu_hide">
		<li id="menu5"><a href="#">Суб категория</a>
			<ul class="menu_hide">
				<li id="menu6"><a href="url">Продукт1</a></li>
				<li id="menu7"><a href="url">Продукт2</a></li>
			</ul>
		</li>
		<li id="menu8"><a href="#">Суб категория</a>
			<ul class="menu_hide">
				<li id="menu9"><a href="url">Продукт3</a></li>
				<li id="menu10"><a href="url">Продукт4</a></li>
			</ul>
		</li>
	</ul>
</li>

Ява-скрипт развешивает события щелчка и в принципе больше ничего не делает кроме отключения/включения выбранного UL. Поскольку UL выбрать нельзя, он просто находится как parent щелкнутого LI:

var child_ul = find_child_ul(this);
if(child_ul)
	child_ul.classList.toggle('menu_hide');

Так вот, в принципе все работает. Щелкнутый пункт (визуально) раскрывается с анимацией, и скрывается с анимацией но перед закрытием он думает ровно столько, сколько длится анимация. То есть там 1 секунда нарисована, браузер 1 секунду думает прежде чем за следующую секунду свернуть UL с глаз долой.

Вопрос, откуда берется пауза, как ее избежать применительно к представленной структуре, или как вообще это сделать.

То есть находится как child.

Я пробовал анимировать самим скриптом, но там сразу возникает куча геморроя, например самое простое узнать какова будет высота UL можно умножив высоту дочерних LI на их количество, но в разных браузерах по-разному. В ФФ надо добавлять 1 пиксел, а в Хроме - надо вычитать 2 пиксела. Одуреешь. Хотелось бы просто переключением классов. Точнее отключением одного класса.

Кажись это большой max-height виноват. Когда открывается то просто не видно что браузер еще там досчитывает до 2000, а когда закрывается то видно что браузер отсчитывает от 2000. Я уменьшил до 600, но где гарантия что какое-то меню не окажется больше. Гемор, короче. Просто не получается.

Зло%$#е списки. Сделал как умные люди делают - скрыть все LI и открывать их по щелчку на заранее открытом переключая класс - х нанэ. Заранее открытый имеет заданную высоту которая уже не меняется и соответственно внутри него тупо ничего не появляться, хотя оно и появляться за счет увеличения высоты ранее раных 0. Как зашибись без анимации - display:bliock | dusplay:none - и все щелкает как из пушки.

В общем забил, там можно подогнать динамику на открытие/закрытие, подогнал.

.tree_menu ul {
		padding:0;
		margin:0;
		list-style-type: none;
		color:#5d5541;
		background-color:#ead9b8;
		overflow: hidden;
		max-height: 500px;
		transition: max-height 1s 0s ease-in;
	}

	ul.menu_hide {
		overflow: hidden;
		max-height: 0px;
		transition: max-height 0.5s -0.3s ease-out;
	}