我感谢所有的回答。以下是我用于类似目的的内容：过渡与动画。

例子：https://jsfiddle.net/grinevri/tcod87Le/22/

<div class="animation"></div>
<div class="transition"></div>

@keyframes animationTo {
  0% { background-color: rgba(0, 0, 0, 0.1); }
  100% { background-color: rgba(0, 0, 0, 0.5); }
}

@keyframes animationFrom {
  0% { background-color: rgba(0, 0, 0, 0.5); }
  100% { background-color: rgba(0, 0, 0, 0.1); }
}

.animation,
.transition{
  margin: 5px;
  height: 100px;
  width: 100px;
  background-color: rgba(0, 0, 0, 0.1);
}

.animation{
  animation: animationFrom 250ms;
}

.animation:hover{
  background-color: rgba(0, 0, 0, 0.5);
  animation: animationTo 250ms;
}

.transition{
  transition: background-color 250ms;
}

.transition:hover{
  background-color: rgba(0, 0, 0, 0.5);
}

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

我怀疑，如果显示发生变化，转换被禁用的原因是因为显示实际的功能。它不会改变任何可以想象的流畅动画。

显示：无；可见性：隐藏；是两件完全不同的事情。两者都具有使元素不可见的效果，但具有可见性：隐藏；它仍然呈现在布局中，但只是不明显。隐藏元素仍然占用空间，并且仍然以内联或块、块内联或表的形式呈现，或者以显示元素告诉的方式呈现，并相应地占用空间。其他元素不会自动移动以占用该空间。隐藏元素只是不将其实际像素渲染到输出。

display：另一方面，没有一个实际上阻止元素完全渲染。它不占用任何布局空间。其他原本占据该元素占用的部分或全部空间的元素现在调整为占据该空间，就好像该元素根本不存在一样。

显示不仅仅是另一种视觉属性。它建立了元素的整个呈现模式，例如它是块、内联、内联块、表、表行、表单元格、列表项还是其他任何元素！每一个都有非常不同的布局影响，并且没有合理的方法来动画化或平滑地转换它们（例如，尝试想象从块到内联的平滑转换，反之亦然！）。

这就是为什么如果显示更改（即使更改为none或从none更改为none-none不仅仅是不可见的，它本身的元素渲染模式意味着根本没有渲染！），则会禁用转换。

显示不是转换工作的财产之一。

有关可以应用转换的CSS财产的列表，请参阅动画CSS财产。请参阅CSS值和单位模块第4级，组合值：插值、相加和累加，了解如何插值。

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

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

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

编辑：在本示例中未应用display none。

@keyframes hide {
  0% {
    display: block;
    opacity: 1;
  }
  99% {
    display: block;
  }
  100% {
    display: none;
    opacity: 0;
  }
}

上面发生的是，99%的动画显示设置为阻止，而不透明度逐渐消失。在最后一刻，display属性设置为none。

最重要的一点是使用动画填充模式在动画结束后保留最后一帧：向前

.hide {
   animation: hide 1s linear;
   animation-fill-mode: forwards;
}

以下是两个示例：https://jsfiddle.net/qwnz9tqg/3/

我巧妙的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;
}

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