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

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

在本文发表时，如果您尝试更改显示属性，所有主要浏览器都会禁用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>

我怀疑任何刚开始CSS转换的人都会很快发现，如果你同时修改显示属性（block/none），它们就不起作用了。一个尚未提及的解决方法是，您可以继续使用display:block/none来隐藏/显示元素，但将其不透明度设置为0，这样即使在显示为display:block时，它仍然是不可见的。

然后添加另一个CSS类，例如“on”，将不透明度设置为1，并定义不透明度的转换。正如您可能想象的那样，您必须使用JavaScript将“on”类添加到元素中，但至少您仍在使用CSS进行实际转换。

P.S.如果您发现自己需要同时执行display:block和添加class“on”，请使用setTimeout延迟后者。否则，浏览器只会同时看到这两种情况，并禁用转换。

我有一个类似的问题，但我找不到答案。后来几次谷歌搜索把我带到了这里。考虑到我没有找到我所希望的简单答案，我偶然发现了一个既优雅又有效的解决方案。

结果表明，可见性CSS属性具有一个值折叠，通常用于表项。然而，如果在任何其他元素上使用，它会有效地将它们渲染为隐藏的，与显示几乎相同：隐藏，但添加了元素不占用任何空间的功能，您仍然可以为有问题的元素设置动画。

下面是一个简单的例子。

函数toggleVisibility（）{let exampleElement=document.querySelector（'span'）；if（exampleElement.classList.incontains（'visible'））{回来}exampleElement.innerHTML='我不会占用空间！'；exampleElement.classList.tggle（'hidden'）；exampleElement.classList.tggle（'visible'）；setTimeout（（）=>{exampleElement.classList.tggle（'visible'）；exampleElement.classList.tggle（'hidden'）；}, 3000);}#主要的，主要的{显示：柔性；弯曲方向：柱；宽度：300px；文本对齐：居中；}.隐藏{可见性：塌陷；不透明度：0；过渡：可见性2s，不透明度2s线性；}.可见{可见性：可见；不透明度：1；过渡：可见性0.5s，不透明度0.5s线性；}<div id=“main”><button onclick=“toggleVisibility（）”>单击我</按钮><span class=“hidden”></span><span>我会被推回去</span></div>

现在可以向块特性添加自定义动画。

@keyframes showNav {
  from {opacity: 0;}
  to {opacity: 1;}
}
.subnav-is-opened .main-nav__secondary-nav {
  display: block;
  animation: showNav 250ms ease-in-out both;
}

Demo

在这个演示中，子菜单从display:none变为display:block，并且仍然能够淡入淡出。

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