У меня проблема с использованием 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>
Я считаю, что вам нужно установить заданную высоту вместо auto. http://jsfiddle.net/BN4Ny/, это делает плавное расширение. Не уверен, что вы хотите, чтобы этот небольшой эффект был закрыт. Я просто разветкил ваш jsfiddle и добавил указанную высоту.
Вот как вы можете это сделать: http://jsfiddle.net/minitech/hTzt4/
Чтобы сохранить гибкую высоту, к сожалению, JavaScript является необходимостью.
Вместо того, чтобы использовать высоту набора на контейнере или использовать JS (которые являются как неудобными решениями)... Вы можете поместить изображения в элементы списка и выполнить свой переход на ли.
Если все изображения соответствуют одинаковой высоте, это означает, что ваш контент внутри контейнера может быть динамическим. Например...
/*
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;}