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

Question

我正在构建一个导航，它将淡入和淡出下拉子菜单。因为我想用纯CSS构建它，所以我正在尝试使用过渡。但无论我做什么，它都不起作用，尽管这似乎是正确的方法。

我将子列表的隐藏正常版本定义为显示 none 和不透明度 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>

供您参考，这里有一个小提琴(不介意转换"全部"而不仅仅是"不透明度"的呼吁，两者都尝试了：-((：

https://jsfiddle.net/hzhnqx1r/

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

感谢您的帮助！

Answer 1

如果将

display 属性切换为/从none切换，则转换将不起作用。
(MDN：哪些CSS属性是可动画的(

一个技巧是将其移入/移出视线。

(代码的(简化示例

#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和显示：阻止悬停。喜欢这个

#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/