不使用显示，您可以将元素存储在“屏幕外”，直到您需要它，然后将其位置设置为您想要的位置，同时对其进行转换。然而，这带来了一系列其他设计问题，因此您的里程可能会有所不同。

无论如何，您可能不想使用显示，因为您希望屏幕阅读器可以访问内容，而屏幕阅读器在很大程度上试图遵守可见性规则-即，如果它不应该被眼睛看到，它就不会作为内容显示给代理。

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

我通过绝对定位＜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;
}

我认为萨尔曼PK有最接近的答案。它可以通过以下CSS动画淡入或淡出项目。但是，显示属性不会平滑地设置动画，只有不透明度。

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

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

如果你想让元素从显示块移动到不显示块，我看不出目前只使用CSS是可能的。您必须获得高度并使用CSS动画来降低高度。这在CSS中是可能的，如下面的示例所示，但要知道为元素设置动画所需的确切高度值是很困难的。

jsFiddle示例

CSS

@-webkit-keyframes pushDown {
  0% {
    height: 10em;
  }
  25% {
    height: 7.5em;
  }
  50% {
    height: 5em;
  }
  75% {
    height: 2.5em;
  }
  100% {
    height: 0em;
  }
}

.push-down {
    -webkit-animation: pushDown 2s forwards linear;
}

JavaScript

var element = document.getElementById("element");

// Push item down
element.className = element.className + " push-down";

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

我怀疑，如果显示发生变化，转换被禁用的原因是因为显示实际的功能。它不会改变任何可以想象的流畅动画。

显示：无；可见性：隐藏；是两件完全不同的事情。两者都具有使元素不可见的效果，但具有可见性：隐藏；它仍然呈现在布局中，但只是不明显。隐藏元素仍然占用空间，并且仍然以内联或块、块内联或表的形式呈现，或者以显示元素告诉的方式呈现，并相应地占用空间。其他元素不会自动移动以占用该空间。隐藏元素只是不将其实际像素渲染到输出。

display：另一方面，没有一个实际上阻止元素完全渲染。它不占用任何布局空间。其他原本占据该元素占用的部分或全部空间的元素现在调整为占据该空间，就好像该元素根本不存在一样。

显示不仅仅是另一种视觉属性。它建立了元素的整个呈现模式，例如它是块、内联、内联块、表、表行、表单元格、列表项还是其他任何元素！每一个都有非常不同的布局影响，并且没有合理的方法来动画化或平滑地转换它们（例如，尝试想象从块到内联的平滑转换，反之亦然！）。

这就是为什么如果显示更改（即使更改为none或从none更改为none-none不仅仅是不可见的，它本身的元素渲染模式意味着根本没有渲染！），则会禁用转换。

我已经多次遇到这个问题，现在只是简单地说：

.block {
  opacity: 1;
  transition: opacity 250ms ease;
}

.block--invisible {
  pointer-events: none;
  opacity: 0;
}

通过添加类块（不可见），整个元素将不可单击，但它后面的所有元素都将是因为指针事件：所有主要浏览器都不支持（没有IE＜11）。