css3 высота перехода не работает - PullRequest
Новая
       9

css3 высота перехода не работает

14 голосов
/ 22 мая 2011

У меня проблема с использованием переходов css3. Как мне сделать переход плавным, он появляется мгновенно?я хочу, чтобы блок div медленно изменял свою высоту при наведении на него

HTML-код 

<div id="imgs">

<img src="http://chat.ecobytes.net/img/emoticons/smile.png" alt=":)" title=":)" />
<img src="http://chat.ecobytes.net/img/emoticons/sad.png" alt=":(" title=":(" />
<img src="http://chat.ecobytes.net/img/emoticons/wink.png" alt=";)" title=";)" />
<img src="http://chat.ecobytes.net/img/emoticons/razz.png" alt=":P" title=":P" />
<img src="http://chat.ecobytes.net/img/emoticons/grin.png" alt=":D" title=":D" />
<img src="http://chat.ecobytes.net/img/emoticons/plain.png" alt=":|" title=":|" />
<img src="http://chat.ecobytes.net/img/emoticons/surprise.png" alt=":O" title=":O" />
<img src="http://chat.ecobytes.net/img/emoticons/confused.png" alt=":?" title=":?" />
<img src="http://chat.ecobytes.net/img/emoticons/glasses.png" alt="8)" title="8)" />
<img src="http://chat.ecobytes.net/img/emoticons/eek.png" alt="8o" title="8o" />
<img src="http://chat.ecobytes.net/img/emoticons/cool.png" alt="B)" title="B)" />
<img src="http://chat.ecobytes.net/img/emoticons/smile-big.png" alt=":-)" title=":-)" />

</div>

jsfiddle

Ответы [ 4 ]

24 голосов
/ 22 мая 2011

Я считаю, что вам нужно установить указанную высоту вместо авто. http://jsfiddle.net/BN4Ny/ это делает плавное расширение. Не уверен, что вам нужен этот маленький эффект открытия. Я только что раздвоил твой jsfiddle и добавил указанную высоту.

4 голосов
/ 22 августа 2018

Это решение не нуждается в javascript или имеет проблему с необходимостью иметь фиксированную высоту контейнера перед рукой.

Это стало возможным благодаря использованию свойства max-height и установке его значения в высокое значение. 

#imgs {
    border:1px solid #000;
    border-radius:3px;
    max-height:20px;
    width:100%;
    overflow:hidden;
    transition: 2s ease;
}
#imgs:hover {
    max-height:15em;
}
<div id="imgs">

  <img src="https://sslb.ulximg.com/image/405x405/artist/1346353449_4159240d68a922ee4ecdfd8e85d179c6.jpg/e96a72d63f272127d0b6d70c76fd3f61/1346353449_eminem.jpg" />
</div>
3 голосов
/ 26 августа 2013

Вместо использования заданной высоты в контейнере или использования JS (оба являются неудобными решениями) ... Вы можете поместить изображения в элементы списка и выполнить переход на li.

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

/*
CLOSED
*/

div.container li 

{  height:0px;

-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;}

/*
OPEN
*/

div.container:hover li 

{  height:30px;

-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;}
3 голосов
/ 22 мая 2011

Вот как вы можете это сделать: http://jsfiddle.net/minitech/hTzt4/

Чтобы сохранить гибкую высоту, JavaScript, к сожалению, является необходимостью.

...