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

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

我喜欢这个解决方案，因为它避免了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>

如果您使用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（））。

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

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

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

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

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

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

您可以使用转换事件来实现这一点，因此您为转换构建了两个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＞之后不显示

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

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

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

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

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

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

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

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

更多详情请参阅本文。