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

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

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

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

从这些答案和其他地方的一些建议中，以下内容非常适合悬停菜单（我在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类，一个保存动画，另一个保存display none状态。你在动画结束后切换它们？在我的例子中，如果我按下一个按钮，我可以再次显示div，并删除这两个类。

尝试下面的代码段。。。

$（文档）.ready（函数）{//分配转换事件$（“table”）.on（“animationend webkitAnimationEnd”，“.visibility_switch_off”，函数（事件）{//我们检查这是否是我们想要的动画如果（event.originalEvent.animationName==“col_hide_anim”）{//在动画之后，我们分配了这个基本上隐藏元素的新类。$（this）.addClass（“动画助手显示无”）；}});$（“按钮”）.click（函数（事件）{$（“table tr.hide col”）.tggleClass（函数）{//我们以切换方式切换动画类。。。//我们知道在动画结束后//动画助手将不显示额外内容//类，当我们需要删除时//根据切换再次显示元素//状态，所以我们在它们之间建立了关系。if（$（this）.is（“.animation helper display none”））{//我正在切换，然后已经有了上面的课程//我们希望它显示元素，因此我们删除//两个类。。。返回“visibility_switch_off动画助手显示无”；}其他{//这里我们只想隐藏元素，所以我们//添加动画类，另一个将被添加//稍后是animationend事件。。。返回“visibility_switch_off”；}});});});表th{背景色：灰色；}表td{背景色：白色；填充：5px；}.animation助手显示无{显示：无；}表tr.visibility_switch_off{动画填充模式：向前；动画名称：col_hide_anim；动画持续时间：1s；}@-webkit关键帧col_hide_anim{0%｛不透明度：1；｝100%｛不透明度：0；｝}@-moz关键帧col_hide_anim{0%｛不透明度：1；｝100%｛不透明度：0；｝}@-o-keyframe col_hide_anim{0%｛不透明度：1；｝100%｛不透明度：0；｝}@关键帧col_hide_anim{0%｛不透明度：1；｝100%｛不透明度：0；｝}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><表><theader><tr><th>名称</th>年龄</th><th>国家</th></tr></theader><tbody><tr><td>姓名</td>年龄</td><td>国家/地区</td></tr></tbody></table>＜button＞切换-使用渐变动画隐藏“年龄”列，并在＜/button＞之后不显示

将溢出：隐藏更改为溢出：可见。它工作得更好。我这样使用：

#menu ul li ul {
    background-color:#fe1c1c;
    width:85px;
    height:0px;
    opacity:0;
    box-shadow:1px 3px 10px #000000;
    border-radius:3px;
    z-index:1;
    -webkit-transition:all 0.5s ease;
    -moz-transition:all 0.6s ease;
}

#menu ul li:hover ul  {
    overflow:visible;
    opacity:1;
    height:140px;
}

可见更好，因为溢出：隐藏的行为与显示：无完全相同。

我们可以使用transition delay属性来代替CSS中不存在的回调。

#selector {
    overflow: hidden;  /* Hide the element content, while height = 0 */
    height: 0;
    opacity: 0;
    transition: height 0ms 400ms, opacity 400ms 0ms;
}
#selector.visible {
    height: auto; opacity: 1;
    transition: height 0ms 0ms, opacity 600ms 0ms;
}

那么，这里发生了什么？

当添加了可见类时，高度和不透明度都会立即开始动画（0毫秒），尽管高度需要0毫秒才能完成动画（相当于display:block），不透明度需要600毫秒。移除可见类后，不透明度开始动画（0毫秒延迟，400毫秒持续时间），高度等待400毫秒，然后立即（0毫秒）恢复初始值（相当于显示：动画回调中无）。

注意，这种方法比使用可见性的方法要好。在这种情况下，元素仍然占据页面上的空间，并且并不总是合适的。

有关更多示例，请参阅本文。

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

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

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

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

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