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

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

Предостережение заключается в том, что я хочу сохранить динамическую (авто) высоту.

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

Прояснение в ответ на комментарии:: Это не столько вопрос ожидания, пока все живые браузеры совместимы с 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;
}

Вариант № 1 - Макс-высота взлома

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

против

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

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

Вариант № 2 - Заполнение и иллюзия роста

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

против

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

Вариант № 3 - Подход, основанный на ошибочной ширине

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

против

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

Вариант № 4 - Эффективный, но Jittery, размер шрифта

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

против

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

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

Вариант № 5 - Масштабирование линейной высоты

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

против

a. Мой любимый эстетически, но как и в случае С# 4, это работает наиболее просто с текстовым контентом.

Вариант № 6 - Анти-маржа (как предлагается @graphicdivine)

.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 }

против

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

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

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

До тех пор любые предложения?

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

Ответ 2

Ну... Я знаю, что это было некоторое время, но мне нужно было использовать анимацию высоты и полагать, что многим другим программистам все равно нужно и/или нужно будет это сделать.

Итак, я упал сюда, потому что мне нужно было показать детали режима описания продукта внутри таблицы ячеек, когда пользователь наводит камеру. Без зависания пользователя отображается только максимум 2 строки описания. После того, как пользователь наведет его, все строки (текст может быть от 1 до 8 строк, динамическая и непредсказуемая длина) должны отображаться с некоторой анимацией высоты.

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

Но я не мог быть удовлетворен задержкой анимации "слайд-шоу", как и вы. Это, когда я нашел комментарий о кривой перехода здесь: http://css3.bradshawenterprises.com/animating_height/.

Идея этого парня блестящая, но только это решение само по себе "отключает" эффект "сползания" анимации. Поэтому, немного подумав, я просто прихожу к окончательному решению.

Итак, вот мое решение, используя Rhys Idea (см. ссылку выше):

Слайд-анимация (Hover) с < гладким выражением "и анимацией слайдов без (практически) < ":

div {
  background-color: #ddd;
  width: 400px;
  overflow: hidden;
  -webkit-transition: max-height 1.5s cubic-bezier(0, 1.05, 0, 1);
  -moz-transition: max-height 1.5s cubic-bezier(0, 1.05, 0, 1);
  transition: max-height 1.5s cubic-bezier(0, 1.05, 0, 1);
  max-height: 38px;
}
div:hover {
  -webkit-transition: max-height 2s ease;
  -moz-transition: max-height 2s ease;
  transition: max-height 2s ease;
  max-height: 400px;
}

<div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ac lorem ante. Vestibulum quis magna pretium, lacinia arcu at, condimentum odio. Ut ultrices tempor metus, sit amet tristique nibh vestibulum in. Pellentesque vel velit eget purus mollis
  placerat sed sit amet enim. Sed efficitur orci sapien, ac laoreet erat fringilla sodales.
</div>

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

Ответ 1

Ответ 2

Ответ 3