Question

我正在构建一个可以淡入淡出下拉菜单的导航。因为我想用纯CSS构建它，我试图使用转换。但无论我做什么，它都不起作用，虽然它似乎是正确的方式。

我将子列表的隐藏正常版本定义为none和opacity 0，告诉它使用转换。然后，在其父项悬停时，它应为显示块，并且应该转换不透明度。

这里的问题在哪里？

CSS：

#nav-main>ul>li>ul {
    display: none;
    opacity: 0;
    position: absolute;
    top: 2rem;
    background-color: #fef1a3;
    margin: 0;
    padding: 0.25rem 0;
    text-align: center;
    list-style: none;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
    -o-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -khtml-transition: all 0.5s linear;
    -webkit-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    transition: all 0.5s linear
}
#nav-main>ul>li:hover>ul {
    display: block;
    opacity: 1
}

HTML：

<nav id="nav-main">
    <ul>
        <li>
            <a href="#">Link 1</a>
            <ul>
                <li>
                    <a href="#">Link 1.1</a>
                </li>
            </ul>
        </li>
    </ul>
</nav>

供您参考，这里有一个小提琴（不要介意过渡的呼吁＆＃34;所有＆＃34;而不仅仅是＆＃34;不透明＆＃34;，试过两个:-)）：

https://jsfiddle.net/hzhnqx1r/

到目前为止在Firefox和Safari中尝试过它。两者都有同样的问题。

感谢您的帮助！

Answer 1

如果您将display属性切换为/ none，则转换无效（ MDN: Which CSS properties are animatable ）

诀窍是将其移入/移出视线。

简化示例（代码）

#nav-main>ul>li>ul {
    opacity: 0;
    position: absolute;
    top: 1rem;
    left:-9999rem;

    transition: opacity 0.5s linear 0s, left 0s linear 0.5s;
}
#nav-main>ul>li:hover>ul {
    opacity: 1;
    left:0;

    transition: opacity 0.5s linear;
}

我们在这里做的是我们最初将ul方式放在屏幕上left:-9999rem并将其设置为0上的:hover

在取消悬停时使用left属性动画的延迟以允许淡出显示。

https://jsfiddle.net/hzhnqx1r/3/

演示

Answer 2

然后你不需要显示：none和display：阻止悬停。像这样

#nav-main>ul>li>ul {
    opacity: 0;
    position: absolute;
    top: 2rem;
    background-color: #fef1a3;
    margin: 0;
    padding: 0.25rem 0;
    text-align: center;
    list-style: none;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
    -o-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -khtml-transition: all 0.5s linear;
    -webkit-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    transition: all 0.5s linear
}
#nav-main>ul>li:hover>ul {
    opacity: 1
}

Answer 3

For your knowledge opacity property value work with in 0-0.9

我还更新了您的小提琴参考，以便您更好地理解

https://jsfiddle.net/hzhnqx1r/2/

悬停时不透明度的CSS3过渡不起作用

3 个答案: