从这些答案和其他地方的一些建议中，以下内容非常适合悬停菜单（我在Bootstrap 3中使用了这一点）：

nav .dropdown-menu {
    display: block;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 500ms, opacity 300ms;
    -webkit-transition: max-height 500ms, opacity 300ms;
}
nav .dropdown:hover .dropdown-menu {
    max-height: 500px;
    opacity: 1;
    transition: max-height 0, opacity 300ms;
    -webkit-transition: max-height 0, opacity 300ms;
}

如果同时指定两个值，也可以使用height代替max height，因为height:auto不允许用于过渡。最大高度的悬停值需要大于菜单的高度。

我有一个类似的问题，但我找不到答案。后来几次谷歌搜索把我带到了这里。考虑到我没有找到我所希望的简单答案，我偶然发现了一个既优雅又有效的解决方案。

结果表明，可见性CSS属性具有一个值折叠，通常用于表项。然而，如果在任何其他元素上使用，它会有效地将它们渲染为隐藏的，与显示几乎相同：隐藏，但添加了元素不占用任何空间的功能，您仍然可以为有问题的元素设置动画。

下面是一个简单的例子。

函数toggleVisibility（）{let exampleElement=document.querySelector（'span'）；if（exampleElement.classList.incontains（'visible'））{回来}exampleElement.innerHTML='我不会占用空间！'；exampleElement.classList.tggle（'hidden'）；exampleElement.classList.tggle（'visible'）；setTimeout（（）=>{exampleElement.classList.tggle（'visible'）；exampleElement.classList.tggle（'hidden'）；}, 3000);}#主要的，主要的{显示：柔性；弯曲方向：柱；宽度：300px；文本对齐：居中；}.隐藏{可见性：塌陷；不透明度：0；过渡：可见性2s，不透明度2s线性；}.可见{可见性：可见；不透明度：1；过渡：可见性0.5s，不透明度0.5s线性；}<div id=“main”><button onclick=“toggleVisibility（）”>单击我</按钮><span class=“hidden”></span><span>我会被推回去</span></div>

不需要JavaScript，也不需要惊人的最大高度。相反，在文本元素上设置最大高度，并使用字体相对单位，例如rem或em。这样，您可以设置比容器更大的最大高度，同时避免菜单关闭时出现延迟或“弹出”：

HTML

<nav>
  <input type="checkbox" />
  <ul>
    <li>Link 1</li>
    <li>Link 1</li>
    <li>Link 1</li>
    <li>Link 1</li>
  </ul>
</nav>

CSS

nav input + ul li { // Notice I set max-height on li, not ul
   max-height: 0;
}

nav input:checked + ul li {
   max-height: 3rem; // A little bigger to allow for text-wrapping - but not outrageous
}

请参阅此处的示例：http://codepen.io/mindfullsilence/pen/DtzjE

您可以连接两个或更多的转换，而可见性是这次方便的地方。

第二部分{边框：1px实心#eee；}div>ul{可见性：隐藏；不透明度：0；过渡：可见性0s，不透明度0.5s线性；}div：悬停>ul{可见性：可见；不透明度：1；}＜div＞＜ul＞<li>项目1</li><li>项目2</li><li>项目3</li></ul></div>

（不要忘记转换属性的供应商前缀。）

更多详情请参阅本文。

在本文发表时，如果您尝试更改显示属性，所有主要浏览器都会禁用CSS转换，但CSS动画仍然可以正常工作，因此我们可以使用它们作为解决方法。

示例代码（您可以相应地将其应用于菜单）演示：

将以下CSS添加到样式表中：

@-webkit-keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}
@keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}

然后将fadeIn动画应用于父级悬停时的子级（当然还有设置显示：块）：

.parent:hover .child {
    display: block;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}

更新2019-也支持淡出的方法：

（需要一些JavaScript代码）

//我们需要跟踪淡入元素，以便稍后在CSS中应用淡入document.addEventListener（“动画启动”，函数（e）{if（e.animationName==“淡入”）{e.target.classList.add（'did-fade-in'）；}});document.addEventListener（'animonend'，函数（e）{if（e.animationName===“淡出”）{e.target.classList.remove（'did-fade-in'）；}});第二部分{边框：5px实心；填充：10px；}div:悬停{边框颜色：红色；}.父项.子项{显示：无；}.parent:悬停.child{显示：块；动画：淡入1秒；}.parent:not（：hover）.child.id-fade-in{显示：块；动画：淡出1s；}@关键帧淡入{来自{不透明度：0；}至{不透明度：1；}}@关键帧淡出{来自{不透明度：1；}至{不透明度：0；}}<div class=“parent”>父母亲<div class=“child”>小孩</div></div>

我巧妙的JavaScript技巧是将整个场景分成两个不同的函数！

为了准备工作，声明了一个全局变量并定义了一个事件处理程序：

  var tTimeout;
  element.addEventListener("transitionend", afterTransition, true);//firefox
  element.addEventListener("webkitTransitionEnd", afterTransition, true);//chrome

然后，当隐藏元素时，我使用类似这样的方法：

function hide(){
  element.style.opacity = 0;
}

function afterTransition(){
  element.style.display = 'none';
}

为了再现元素，我正在执行以下操作：

function show(){
  element.style.display = 'block';
  tTimeout = setTimeout(timeoutShow, 100);
}

function timeoutShow(){
  element.style.opacity = 1;
}

到目前为止，它是有效的！