html - 为什么我的不透明度过渡时间 (CSS) 不起作用？ CSS block 中的其他所有内容都有效吗？

Question

我设置了一个导航菜单，因此子菜单会在悬停时出现(通过更改不透明度)。可以查看本站here .

我遇到的问题是，我想要缓慢淡入(1.4 秒)，但淡入中断，子菜单现在立即出现，这很刺耳。

相关代码在下面或者你可以查看GitHub repo here .非常感谢您的帮助，如果您需要更多信息，请告诉我!

.dropdown-content {
position: absolute;
z-index: 1;
line-height: 12px;
opacity: 0;
margin-top: -400px;
font-size: 14px;
display: none;
}

.dropdown:hover .dropdown-content {
display: block;
margin-left: 90px;
margin-top: -3.3em;
opacity: 1;
transition: opacity 1.4s ease;
}

<div class="dropdown">
    <p>Weddings</p>
    <div class="dropdown-content">
        <a href="#">Alvin & Johanna</a>
        <a href="#">Jenn & Matt</a>
        <a href="#">Taylor & Craig</a>
        <a href="#">Greg & Jocelyn</a>
    </div>
</div>

Answer 1

原因是你的display参数。如果您将它设置为 block 两种状态(或从两个规则中删除它，将它们保留为默认设置)，不透明度动画将起作用:

.dropdown-content {
position: absolute;
z-index: 1;
line-height: 12px;
opacity: 0;
margin-top: -400px;
font-size: 14px;
display: block;
}

.dropdown:hover .dropdown-content {
display: block;
margin-left: 90px;
margin-top: -3.3em;
opacity: 1;
transition: opacity 1.4s ease;
}

<div class="dropdown">
    <p>Weddings</p>
    <div class="dropdown-content">
        <a href="#">Alvin & Johanna</a>
        <a href="#">Jenn & Matt</a>
        <a href="#">Taylor & Craig</a>
        <a href="#">Greg & Jocelyn</a>
    </div>
</div>