Ищу элегантный метод только CSS для скрытия / отображения содержимого с автоматической высотой (с переходами)

Мне нужен метод, который использует только переходы CSS, чтобы эффективно (и привлекательно) скрывать / отображать контент при наведении курсора.

Я хочу сохранить динамическую (автоматическую) высоту.

Похоже, что оптимальным путем был бы переход между фиксированной высотой : 0 и высотой: авто , но, увы, это еще не поддерживается переходами в браузерах.

Разъяснение в ответ на комментарии :: Это не столько вопрос ожидания, пока все живые браузеры станут совместимыми с CSS3, сколько устранение предполагаемого недостатка самого CSS3 (например, отсутствие ] height: 0 > height: auto )

Я исследовал несколько других способов, которые можно просмотреть на следующей скрипке (и подробно описано ниже), но ни один из них меня не устраивает , и я хотел бы получить отзывы / советы по другим подходам.

http://jsfiddle.net/leifparker/PWbXp/1/

Базовый CSS

.content{
    -webkit-transition:all 0.5s ease-in-out;  
    -moz-transition:all 0.5s ease-in-out;
    transition:all 0.5s ease-in-out;
    overflow:hidden;
}

.content { max-height:0px; }
.activator:hover +.content{ max-height:2000px; }

Минусы

a. Вам потребуется произвольно установить верхнее значение max-height , которое при большом динамическом содержании потенциально может отрезать информацию.

б. Если в качестве меры предосторожности для ( a ) вы прибегаете к установке очень верхних max-height , задержка анимации становится неудобной, и несостоятельно, так как браузер незаметно переходит все расстояние. Также делает ослабление визуально менее эффективным.

.content { padding:0px; height:0px; opacity:0; }
.activator:hover +.content { padding:10px 0px; height:auto; opacity:1; }

Минусы

a. Это раздражает. Это определенно немного лучше, чем просто выталкивать контент из ниоткуда, и эффект еще больше продается за счет изменения непрозрачности, но в целом это не так гладко.

.content { width:0%; }
.activator:hover +.content{ width:100%; }

Минусы

a. По мере уменьшения ширины перенос строки переносит любой дополнительный текст на последующие строки, и мы получаем сверхвысокий невидимый элемент div, который по-прежнему требует дополнительных ресурсов.

.content {  font-size:0em; opacity:0; }
.activator:hover +.content{  font-size:1em; opacity:1; }

Минусы

a. Хотя это дает приятный размашистый эффект, смещение переноса строки по мере увеличения шрифта вызывает непривлекательное дрожание.

б. Работает только для содержимого, состоящего из текста. Потребуется добавить другие переходы для управления масштабированием входных данных и изображений, и, хотя это вполне жизнеспособно, это подорвет простоту.

.content { line-height:0em; opacity:0; }
.activator:hover +.content{ line-height:1.2em; opacity:1; }

Минусы

a. Мне больше всего нравится эстетика, но, как и в случае с №4, это проще всего работает с текстовым контентом.

.wrapper_6 { min-height: 20px }
.wrapper_6 .activator {z-index:10; position: relative}
.wrapper_6 .content { margin-top: -100%; }
.wrapper_6 .activator:hover +.content{ margin-top: 0 }

Минусы

а. Задержка при наведении курсора не оптимальна. Это результат .Контент незаметно спрятан довольно далеко вверх по экрану, и требуется время для анимации вниз перед появлением.

б. margin-top: -100% относится к ширине содержащего элемента. Таким образом, в случае гибких дизайнов существует вероятность того, что при уменьшении окна до очень малого размера margin-top не будет достаточно, чтобы скрыть .content .

Как я уже сказал, если бы мы только могли переходить между height:0 и height:auto, все это было бы спорным.

А пока, какие-нибудь предложения?

Спасибо! Лейф