如果您使用jQuery设置类，这将100%有效：

$（文档）.ready（函数）{$（'按钮'）.click（函数）{var container=$（'.container'）；if（！container.hasClass（'active'））{container.addClass（“显示”）.outerWidth（）；container.addClass（'active'）；}其他{container.removeClass（'active'）.one（'transitioned'，function（）{container.removeClass（“显示”）；});}});});.容器{显示：无；不透明度：0；过渡：不透明度0.3s缓解；}.container.show{显示：柔性；}.容器激活{不透明度：1；}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><button type=“button”>切换</button><div class=“container”>Lorem ipsum dolor sit amet，consectetur adipiscing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。在最低限度的威尼斯，quis nostrud exerciation ullamco labour nisi Ut aliquip ex a commo consequat。这是一个很好的例子。除了你偶尔犯下的错误外，你还得承担责任，这是因为你在实验室里表现得很糟糕。</div>

当然，您可以只使用jQuery.fadeIn（）和.fadeOut（）函数，但设置类的好处是，如果您想转换为块以外的显示值（默认情况下使用.fadeIn）和.fadaOut（））。

在这里，我正在过渡到具有良好渐变效果的显示弹性。

在本文发表时，如果您尝试更改显示属性，所有主要浏览器都会禁用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>

此解决方案具有极好的兼容性，我还没有见过它：

.hidden-element {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity .5s ease-out;
}

.hidden-element.visible {
  position: static;
  z-index: auto;
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
}

说明：它使用了可见性：隐藏技巧（与“显示和动画”在一个步骤中兼容），但它使用了组合位置：绝对；z指数：-1；指针事件：无；以确保隐藏的容器不占用空间并且不响应用户交互。

总的来说，我发现最好的解决方案是：使用负上边距而不是显示：无。

对我来说效果很好的解决方案是使用一个负的上边距-边距对动画/转换有效-在转换转换后将菜单从页面顶部移开。对我来说，其中一个问题是，即使在使用可见性隐藏之后，它也会占用空间，下面的解决方案（结合绝对定位）解决了这个问题。这样做（并为语义目的将可见性设置为隐藏）几乎与显示：无一样好。但是，请注意，下面的可见性设置是可选的，实际工作是通过负边距完成的。

我喜欢这个解决方案，因为它避免了JavaScript——你可以看到我使用了一个输入元素（隐藏在汉堡图标下面）来隐藏/取消隐藏从屏幕左侧滑入的菜单。一个小小的烦恼是，必须使用“任意大的数字”作为负裕度，但它已经足够好了。IMHO唯一完全干净的解决方案是转换，以支持显示等功能，其中转换只是等待延迟，然后立即转换，但根据当前的CSS标准规范，这里是我的最佳解决方案：

CSS

#menu {
    /* Hide menu */
    position: absolute;
    overflow: hidden;

    margin: -99999px 0 0 -50px;
    padding: 0;
    visibility: hidden;
    transform-origin: 0% 0%;
    transform: translate(-100%, 0);

    transition: margin 0s 0.5s, padding 0s 0.5s, visibility 0s 0.5s, transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
}
#menuToggle input:checked~#menu {
    /* Display menu */
    overflow: unset;

    margin: -80px 0 0 -50px;
    padding: 125px 50px 25px 50px;
    visibility: unset;
    transform: none;

    transition: margin 0s 0s, padding 0s 0s, visibility 0s 0s, transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
}

HTML

<div id="menuToggle">
    <input type="checkbox" id="chkBurgerMenu" />
    <span></span><span></span><span></span>
    <ul class="navbar-nav">
        <li><a href="#" class="nav-link"">Home</a></li>
        <li><a href="#" class="nav-link"">Link1</a></li>
        <li><a href="#" class="nav-link"">Link2</a></li>
    </ul>
</div>

我找到了更好的方法来解决这个问题，你可以使用CSS动画，并为显示项目创造出很棒的效果。

.item {
     display: none;
}

.item:hover {
     display: block;
     animation: fade_in_show 0.5s
}

@keyframes fade_in_show {
     0% {
          opacity: 0;
          transform: scale(0)
     }

     100% {
          opacity: 1;
          transform: scale(1)
     }
}

不需要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