Я хочу создать анимацию expand/collapse, которая работает только по классам (javascript используется для переключения имен классов).
Я даю один класс max-height: 4em; overflow: hidden;
а другой max-height: 255em;
(я также попробовал значение none
, которое вообще не было анимировано)
для анимации: transition: max-height 0.50s ease-in-out;
Я использовал переходы CSS для переключения между ними, но браузер, похоже, оживляет все эти дополнительные em
, поэтому он создает задержку в эффекте коллапса.
Есть ли способ сделать это (в том же духе - с css classnames), который не имеет этого побочного эффекта (я могу поместить меньшее количество пикселей, но это, очевидно, имеет недостатки, поскольку оно может прервать законное текст - что причина большой ценности, поэтому он не отрезает законный длинный текст, только смехотворно длинный)
См. jsFiddle - http://jsfiddle.net/wCzHV/1/ (щелкните текстовый контейнер)