样式=“显示：无”的CSS替代品答案

【问题标题】：CSS Alternatives to style=“display:none”样式=“显示：无”的CSS替代品
【发布时间】：2023-03-22 22:06:01
【问题描述】：

我正在尝试在菜单和子菜单上添加淡入淡出动画，但它只适用于第一个。我正在使用一个 transition: all 0.3s ease 0s;visibility: hidden;margin-top:-10px; on nav >div> ul > li > ul and margin-top:0px;opacity: 1;visibility: visible; 悬停。问题来自nav li > ul ul {display: none;}。似乎 CSS 无法在 display: none; 之间设置动画。并显示：块；而且我不知道如何替换 display: none;

这里是jsfiddle，显示：无，最后一个子菜单上没有动画，这里是jsfiddle，可见性：隐藏；动画有效，但我有有线效果

有没有办法让这个动画在所有子菜单上工作？

【问题讨论】：

标签： css drop-down-menu menu css-animations

【解决方案1】：

试试这个，看起来你是一个级别的：

nav{position: relative;}
nav ul {
  list-style: none;
  margin:0;
  padding: 0;
}
li.has_children{
  position:relative;
}
li.has_children > ul{
  transition: all 0.3s ease 0s;
  visibility:hidden;
  margin-top:-10px;
  opacity:0;
  background-color: green;
}
li.has_children:hover > ul{
  margin-top:0px;
  visibility:visible;
  opacity:1;
}
nav > div > ul> li > ul > li > ul{
  position:absolute;
  top:0;
  left:100%;
  /* You may want to add a width */
}
nav > div > ul > li {
  float: left;
}
nav >div> ul > li  > a:hover{
  background-color: red;
}

<div id="navbar" class="navbar">
<nav id="site-navigation" class="navigation main-navigation" role="navigation">
<div class="menu-mega-container">
<ul id="menu-mega" class="nav-menu">
        <li><a href="#">My awesome button</a></li>
        <li class="has_children"><a href="#">My awesome button</a>
            <ul>
                <li><a href="#">awesome link nº 1</a></li>
                <li><a href="#">awesome link nº 2</a></li>
                <li class="has_children"><a href="#">awesome link nº 3</a>
                <ul>
                <li><a href="#">awesome link nº 1</a></li>
                <li><a href="#">awesome link nº 2</a></li>
                <li><a href="#">awesome link nº 3</a></li>
            </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>
</nav>
</div>

【讨论】：

感谢您的回答@user3617339，但即使它在示例中运行良好，您的代码在我的 wordpress 站点中也不起作用。我只有一个问题，它是 nav li > ul ul { display: none; } 因为它似乎 CSS 不能在 display: none;并显示：块；
我无法删除 nav li > ul ul { display: none; } 没有大的子菜单问题。有什么东西可以代替那个 display:none 而不影响 css 动画吗？
是的。使用可见性：隐藏；不透明度：0；和可见性：可见；不透明度：1；而不是显示

【解决方案2】：

您可以将display 属性与opacity 组合使用以获得相同的动画效果。尽管display 没有动画，但由于opacity 的起点和终点正在动画，它会被应用而不引起注意。

在您的情况下，您需要做的只是添加另一个规则集，如下所示：

nav#site-navigation li > ul ul {
  display: none;
  opacity: 0;

  /* these will fix your jumping issue */
  position: absolute;
  left: 100%;
  top: 0;
}

nav#site-navigation li > ul ul {
  display: block;
  opacity: 1;
}

此外，您应该考虑仅对 transform 属性进行动画处理。当您为margin-top 或宽度/高度/等设置动画时，它会导致浏览器中的重绘/重排，从而影响性能。 transform 动画是使用 GPU 完成的。

【讨论】：