为什么我的不透明度转换时间（CSS）不起作用？ CSS块中的其他所有内容都有效吗？

Question

我设置了一个导航菜单，因此子菜单出现在悬停上（通过更改不透明度）。 您可以在此处查看该站点。

我遇到的问题是，我希望缓慢的淡入（1.4秒），但是淡入中断了，子菜单现在立即出现，这很刺耳。

相关代码在下面，或者您可以在此处查看GitHub存储库。 非常感谢您的帮助，如果您需要更多信息，请告诉我！

 .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>