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

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>

Answer 2

两种情况下删除显示属性

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

}

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

Answer 3

使用 ease-in 过渡时间会使不透明度过渡变慢，但您必须从 dropdown-content css 中删除 display:none 才能实现上班。请注意：我将您的符号从 & 更改为 &（html 符号）

希望对您有所帮助

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

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

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

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

Why isn't my opacity transition time (CSS) working? Everything else in the CSS block works?

html

css

transition

opacity