CSS3 переход в списке игнорируется

Question

CSS3 переход в списке игнорируется

0

Я пытаюсь исчезнуть в списке, но по какой-то причине переход, похоже, игнорируется.

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

Есть ли проблема с тем, как я пытаюсь это реализовать?

http://jsfiddle.net/QeG4X/1/

gpcola 19 сен. 2013, в 13:49

Источник

Теги:

html

css3

2 ответа

1

Ну, display не анимируется, так как вы хотите затухать, добавьте opacity: 0 до ul и opacity: 1 в div:hover ul. Обратите внимание, что вам нужно будет удалить display из обоих правил. См. Скрипку: http://jsfiddle.net/QeG4X/3/

Kroltan 19 сен. 2013, в 10:26

Ещё вопросы

chris · Accepted Answer · 2013-09-19T09-26-00.000Z

Вы не можете анимировать свойство отображения 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;
}

Другой вариант - оживить высоту, то есть элемент.