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

【问题标题】：CSS3 transition for opacity on hover does not work悬停时不透明度的 CSS3 过渡不起作用
【发布时间】：2015-03-05 09:09:21
【问题描述】：

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

我将子列表的隐藏正常版本定义为无显示和不透明度 0，告诉它使用过渡。然后，在它的父级悬停时，它应该是 display-block'd 并且应该转换不透明度。

问题出在哪里？

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 中尝试过。两者都有同样的问题。

感谢您的帮助！

【问题讨论】：

标签： css css-transitions

【解决方案1】：

如果您将display 属性切换到none 或从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 on :hover

在取消悬停时对 left 属性动画使用延迟以使淡出可见。

https://jsfiddle.net/hzhnqx1r/3/的演示

【讨论】：

【解决方案2】：

那么你不需要 display: none 和 display: block on hover。像这样

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：