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

这个问题的最简单的通用解决方案是：在CSS中随意指定display:none，但是您必须使用JavaScript将其更改为block（或其他任何内容），然后您还必须向有问题的元素添加一个类，该类实际上使用setTimeout（）进行转换。这就是全部。

即。：

<style>
    #el {
        display: none;
        opacity: 0;
    }
    #el.auto-fade-in {
        opacity: 1;
        transition: all 1s ease-out; /* Future, future, please come sooner! */
        -webkit-transition: all 1s ease-out;
        -moz-transition: all 1s ease-out;
        -o-transition: all 1s ease-out;
    }
</style>

<div id=el>Well, well, well</div>

<script>
    var el = document.getElementById('el');
    el.style.display = 'block';
    setTimeout(function () { el.className = 'auto-fade-in' }, 0);
</script>

这在最新的sane浏览器中进行了测试。显然，它不应该在Internet Explorer 9或更早版本中工作。

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

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

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

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

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

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

@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，并且仍然能够淡入淡出。