您需要显示：无，否则您会偶然发现触发器外的隐藏物体，并且它会意外显示出来......我只是说：)

您可以连接两个或更多个转换， visibility 这次就派上用场了。

div {
  border: 1px solid #eee;
}
div > ul {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;
}
div:hover > ul {
  visibility: visible;
  opacity: 1;
}

<div>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

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

更多详细信息请参阅 本文 .

我可能忽略了某些内容，但为什么您要同时改变可见性和不透明度？将不透明度设置为 0 不会隐藏元素 - 为什么还需要将可见性设置为隐藏？

@GeorgeMillo 如果您仅设置不透明度，元素实际上仍然在页面渲染中（例如，您无法单击思想）。

这不应该被标记为正确答案。它不处理显示属性，并且正如 Rui 所说，元素仍然占用空间，这使其在许多情况下不切实际。

请注意，如果您关心可访问性（您可能确实关心），那么这个答案实际上是完全错误的：不使用 display:none 意味着每个可聚焦/tabindexed 元素仍然存在于页面上，并且您的用户现在将盲目地浏览完全不可见的元素。虽然这似乎有效，但实际上它使相当一部分网络用户的情况变得更糟。相反，您需要一个两步过程，display:none->block 然后淡化不透明度，反向，淡化不透明度然后 display:block->none。

您需要通过其他方式隐藏元素才能使其正常工作。

我通过将两个 <div> s 绝对定位并将隐藏的 s 设置为 opacity: 0 .

如果您甚至将显示属性从 none 切换到 block，其他元素上的转换也不会发生。

为了解决这个问题，总是允许元素为 display: block ，但是通过调整以下任何一种方法来隐藏元素：

1. 设置 height 为 0 .
2. 设置 opacity 为 0 .
3. 将元素定位在另一个元素的框架之外，该元素具有 overflow: hidden .

可能还有更多解决方案，但如果将元素切换为 ，则无法执行转换 display: none 。例如，您可以尝试以下操作：

div {
    display: none;
    transition: opacity 1s ease-out;
    opacity: 0;
}
div.active {
    opacity: 1;
    display: block;
}

但那 行不通 。根据我的经验，我发现这毫无作用。

因此，您始终需要保留该元素 display: block - 但您可以通过执行以下操作来解决这个问题：

div {
    transition: opacity 1s ease-out;
    opacity: 0;
    height: 0;
    overflow: hidden;
}
div.active {
    opacity: 1;
    height: auto;
}

感谢 Jim 的详尽回答。您说得完全正确，如果 display: 属性发生任何变化，则所有转换都将不起作用。这很遗憾 - 我想知道背后的原因是什么。顺便提一下，在我在原始问题中发布的同一链接上，您可以看到我的情况。我遇到的唯一（小）问题是 Chrome [5.0.375.125] 在页面加载时，您可以看到菜单随着页面上元素的加载而快速消失。Firefox 4.0b2 和 Safari 5.0 完全没问题... 是 bug 还是我遗漏了什么？

我实现了这个，但后来它不起作用，然后我意识到你说的这个行不通。这个答案假设我们不仅仅是快速阅读重要的部分……:)

在发布本文时，如果您尝试更改属性 display ，但 CSS 动画仍然可以正常工作，因此我们可以将其用作解决方法。

示例代码 （您可以相应地将其应用到您的菜单） 演示 :

将以下 CSS 添加到样式表：

@-webkit-keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}
@keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}

然后将 fadeIn 动画应用于父级悬停上的子级（当然还要设置 display: block ）：

.parent:hover .child {
    display: block;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}

2019 年更新 - 还支持淡出的方法：

（需要一些 JavaScript 代码）

// We need to keep track of faded in elements so we can apply fade out later in CSS
document.addEventListener('animationstart', function (e) {
  if (e.animationName === 'fade-in') {
      e.target.classList.add('did-fade-in');
  }
});

document.addEventListener('animationend', function (e) {
  if (e.animationName === 'fade-out') {
      e.target.classList.remove('did-fade-in');
   }
});

div {
    border: 5px solid;
    padding: 10px;
}

div:hover {
    border-color: red;
}

.parent .child {
  display: none;
}

.parent:hover .child {
  display: block;
  animation: fade-in 1s;
}

.parent:not(:hover) .child.did-fade-in {
  display: block;
  animation: fade-out 1s;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

<div class="parent">
    Parent
    <div class="child">
        Child
    </div>
</div>

谢谢。上面提到的高度：0 技巧（用于过渡）似乎不起作用，因为淡出过渡时高度被设置为 0，但这个技巧似乎可以正常工作。

这个答案的第一段不太合理。浏览器不会在您使用 display 属性时立即禁用所有转换 - 真的没有理由这样做。即使他们这样做了，动画为什么会起作用呢？您也不能在 CSS 动画中使用 display 属性。

是的，“更改”——我不确定为什么我在这里说“使用”。我的观点是，您无法转换或动画显示，但这并不妨碍所有其他属性的动画，只要您没有转换为无。

这对于高度不是问题的鼠标悬停下拉菜单非常有效。我的下拉菜单在鼠标悬停在父导航项上时淡入，在鼠标移出时淡出。

属性 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: 100px; /* any measurable value, not "auto" */
    opacity: 1;
    transition: height 0ms 0ms, opacity 400ms 0ms;
}

那么，这里发生了什么事？

1. p2

2. p3

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

更多示例请参阅 本文 .

它只适用于高度：100%，在某些情况下会破坏布局。如果这不是问题，那么这是一个很棒的解决方案。少数可双向工作的方案之一。

我怀疑， 更改， 过渡将被禁用的 display 原因 不会 更改任何可以流畅动画的内容。

display: none; 是 visibility: hidden; 两件 完全 不同的事情。
这两种方法都有使元素不可见的效果，但 visibility: hidden; 它仍然在布局中呈现，只是不明显 而已 。
隐藏元素仍然占用空间，并且仍然以内联形式呈现，或者以块形式、块内联形式、表格形式或元素 display 要求其呈现的任何形式呈现，并相应地占用空间。
其他元素不会 自动 移动来占据该空间。隐藏元素只是不会将其实际像素渲染到输出中。

display: none 另一方面实际上 阻止了 元素 完全 .
它不占用 任何 布局空间。
原本会占据该元素部分或全部空间的其他元素现在会进行调整以占据该空间，就好像该元素根本 不存在一样 .

display 不仅仅是另一个视觉属性。
它建立了元素的整个渲染模式，例如它是否是 block , inline , inline-block , table , table-row , table-cell , list-item ，或者其他什么！
它们中的每一个都有非常不同的布局影响，并且没有合理的方法来为它们设置动画或平滑过渡（例如，试想一下从 block 到 inline 或反之亦然的平滑过渡！）。

这就是为什么如果显示发生变化，转换就会被禁用的原因（即使变化是到或从 none - none 不仅仅是不可见，它自己的元素渲染模式意味着根本没有渲染！）。

这是正确的。虽然不是很明显，但一旦你仔细思考，你很快就会意识到转换显示属性是行不通的。

尽管上述解决方案可能很好，但对于为什么转换不适用于显示属性得到一个合理的解释是非常令人满意的。