html - 列表上的 CSS3 过渡被忽略

Question

我试图淡入列表，但由于某种原因，过渡似乎被忽略了。

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/

Answer 1

您不能为 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;
}

另一种选择是为元素的高度设置动画。

Answer 2

嗯，不是动画的，display因为你想淡入，添加opacity: 0到. 请注意，您必须从这两个规则中删除。见小提琴：http: //jsfiddle.net/QeG4X/3/ulopacity: 1div:hover uldisplay