我认为萨尔曼PK有最接近的答案。它可以通过以下CSS动画淡入或淡出项目。但是，显示属性不会平滑地设置动画，只有不透明度。

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

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

如果你想让元素从显示块移动到不显示块，我看不出目前只使用CSS是可能的。您必须获得高度并使用CSS动画来降低高度。这在CSS中是可能的，如下面的示例所示，但要知道为元素设置动画所需的确切高度值是很困难的。

jsFiddle示例

CSS

@-webkit-keyframes pushDown {
  0% {
    height: 10em;
  }
  25% {
    height: 7.5em;
  }
  50% {
    height: 5em;
  }
  75% {
    height: 2.5em;
  }
  100% {
    height: 0em;
  }
}

.push-down {
    -webkit-animation: pushDown 2s forwards linear;
}

JavaScript

var element = document.getElementById("element");

// Push item down
element.className = element.className + " push-down";

我已经多次遇到这个问题，现在只是简单地说：

.block {
  opacity: 1;
  transition: opacity 250ms ease;
}

.block--invisible {
  pointer-events: none;
  opacity: 0;
}

通过添加类块（不可见），整个元素将不可单击，但它后面的所有元素都将是因为指针事件：所有主要浏览器都不支持（没有IE＜11）。

在本文发表时，如果您尝试更改显示属性，所有主要浏览器都会禁用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——你可以看到我使用了一个输入元素（隐藏在汉堡图标下面）来隐藏/取消隐藏从屏幕左侧滑入的菜单。一个小小的烦恼是，必须使用“任意大的数字”作为负裕度，但它已经足够好了。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财产的列表，请参阅动画CSS财产。请参阅CSS值和单位模块第4级，组合值：插值、相加和累加，了解如何插值。

9.1中列出了CSS 3。来自CSS的财产（只需关闭警告弹出窗口）

我也尝试过使用高度，但那只是失败得很惨。

上次我不得不这样做时，我使用了max height，这是一个可设置动画的属性（虽然它有点黑客，但确实有效），但要注意，对于复杂的页面或使用低端移动设备的用户来说，它可能非常刺耳。

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

.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；指针事件：无；以确保隐藏的容器不占用空间并且不响应用户交互。