Question

我无法过渡到我正在努力的网站上工作。导航菜单隐藏并正确显示，但它只是立即显示而没有tranistion。 CSS就是这样：

.nav ul li ul li {
    display:none;
    visibility:hidden;
    transition: all 0.5s ease;
}
.nav ul li:hover > ul 
{
    transition: all 0.5s ease 0s;
    display:block;
    visibility:visible;
}

，HTML是

<div class="nav">
    <ul>
        <li>test</li>
        <li>test
            <ul class="sub-menu">
                <li>test</li>
            </ul>
        </li>
    </ul>
</div>

我用chrome，ffx测试了它，即

我实际上在这个网站上得到了大部分代码，因此我不确定我的问题是什么。

我应该提到，我尝试过其他答案的不透明度，但是在下拉菜单中，它不会起作用，因为菜单停留在那里。

Answer 1

从display: none到display: block的转换行为与预期不符。

改为使用opacity。

jsFiddle Demo

Answer 2

显示属性不适用于过渡。

它建议什么是有效的，你也可以玩其他属性（位置？）以达到预期的效果。

Answer 3

试试这个CSS，这样可以正常使用

.nav ul li > ul {
   opacity:0;
    overflow:hidden;
     transition: all 0.5s ease;
}
.nav ul li:hover > ul 
{
    transition: all 0.5s ease 0s;
    height:auto;
    opacity:1;  
}

<强> Demo Here

CSS3过渡失败

3 个答案: