Я пытаюсь исчезнуть в списке, но по какой-то причине переход, похоже, игнорируется.
HTML
<div>
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
</div>
CSS
div {
background-color: #ccc;
width: 200px;
height: 200px;
}
ul {
display:none;
/*transition*/
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
}
div:hover ul {
display: inline-block;
}
Есть ли проблема с тем, как я пытаюсь это реализовать?
Вы не можете анимировать свойство отображения css. Вы можете сделать это с непрозрачностью!
Вот обновленная скрипка
http://jsfiddle.net/cfknoop/QeG4X/2/
ul {
opacity:0;
/*transition*/
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
}
div:hover ul {
opacity:1;
}
Другой вариант - оживить высоту, то есть элемент.
Ну, display
не анимируется, так как вы хотите затухать, добавьте opacity: 0
до ul
и opacity: 1
в div:hover ul
. Обратите внимание, что вам нужно будет удалить display
из обоих правил. См. Скрипку: http://jsfiddle.net/QeG4X/3/