使用CSS动画淡入：

.item {
     display: none;
}

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

@keyframes fadeIn {
     from {
          opacity: 0;
     }

     to {
          opacity: 1;
     }
}

简单如下：）

@keyframes fadeout {
    0% { opacity: 1; height: auto; }
    90% { opacity: 0; height: auto; }
    100% { opacity: 0; height: 0;
}
animation: fadeout linear 0.5s 1 normal forwards !important;

使其褪色，然后使其高度为0；。还要确保使用forward，使其保持在最终状态。

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

我通过绝对定位＜div＞s并将隐藏的＜div＞设置为不透明度：0来实现这一效果。

如果您甚至将显示属性从“无”切换为“块”，则不会在其他元素上进行转换。

要解决此问题，请始终允许元素显示为：块，但通过调整以下任何方式隐藏元素：

将高度设置为0。将不透明度设置为0。将元素放置在另一个溢出的元素的框架之外：隐藏。

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

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;
}

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

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

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

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

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

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

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

吉列尔莫的回答被接受后，CSS2012-04-03的转换规范改变了可见性转换的行为，现在可以在不使用转换延迟的情况下以更短的方式解决此问题：

.myclass > div {
                   transition:visibility 1s, opacity 1s;
                   visibility:hidden;  opacity:0
               }
.myclass:hover > div
               {   visibility:visible; opacity:1 }

为两个转换指定的运行时间通常应为相同的（尽管稍微长一点的可见性时间不是问题）。

有关运行版本，请参阅我的博客文章CSS Transition Visibility。

W.r.t.问题的标题“显示器上的转换：财产”，并回应Rui Marques和josh对公认答案的评论：

如果显示器或使用visibility属性（这可能是本问题中的情况）。

它不会完全删除显示的元素：无，只是使其不可见，但它仍保留在文档流中，并影响以下元素的位置。

完全删除与显示类似的元素的转换：不能使用高度（如其他答案和注释所示）、最大高度或边距顶部/底部进行转换，但也可以参见如何转换高度：0；至高度：自动；使用CSS？以及我的博客文章《显示器和高度财产上的CSS转换解决方案》。

针对GeorgeMillo的评论：需要财产和两个变换：不透明度属性用于创建淡入淡出动画和可见性属性，以避免元素仍在鼠标上反应事件。需要在不透明度上进行过渡以获得视觉效果可见性以延迟隐藏，直到淡出完成。