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

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

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

我找到了更好的方法来解决这个问题，你可以使用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)
     }
}

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

例子：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);
}

您可以使用转换事件来实现这一点，因此您为转换构建了两个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动画淡入：

.item {
     display: none;
}

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

@keyframes fadeIn {
     from {
          opacity: 0;
     }

     to {
          opacity: 1;
     }
}