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

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

38 голосов
/ 27 сентября 2011

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

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

Кажется, что оптимальным маршрутом будет переход от fixed height:0 к 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 - Взлом Max-Height 
.content { max-height:0px; }
.activator:hover +.content{ max-height:2000px; }

Минусы

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

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

Вариация № 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 - Эффективный, но нервный, размер шрифта 
.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, все это будет спорным.

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

Спасибо!Leif

Ответы [ 3 ]

5 голосов
/ 29 сентября 2011

Попробуйте, Анти-маржа : 

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

http://jsfiddle.net/PWbXp/

4 голосов
/ 05 января 2015

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

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

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

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

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

Итак, вот мое решение, использующее идею Риса (Парень по ссылке выше):

Анимация скольжения вниз (Наведение), с « плавным ростом » и анимацией скольжения без (виртуально) « задержка »: 

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>

Вот простая JsFiddle

А вот ваша JsFiddle обновлена ​​(частьэто действительно так)

Это идеальное (на мой взгляд) решение для меню, описаний и всего, что не является чрезвычайно непредсказуемым, но, как вы указывали ранее, необходимо установить высокий максимум.высота, и может отрезать удивительно высокий динамический контент.В этой конкретной ситуации я буду использовать jQuery / JavaScript для анимации высоты.Поскольку обновление контента будет осуществляться уже с использованием какого-то JavaScript, я не вижу никакого вреда, используя Js-подход к анимации.

Надеюсь, я кому-то там помог!

1 голос
/ 23 июня 2013

Вы должны использовать scaleY.

HTML: 

<p>Here (scaleY(1))</p>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

CSS: 

ul {
    background-color: #eee;
    transform: scaleY(0);    
    transform-origin: top;
    transition: transform 0.26s ease;
}

p:hover ~ ul {
    transform: scaleY(1);
}

Я сделал версию кода выше с префиксом поставщика на jsfiddle, http://jsfiddle.net/dotnetCarpenter/PhyQc/9/

...