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

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

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

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

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

结果表明，可见性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>

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

我通过绝对定位＜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转换的人都会很快发现，如果你同时修改显示属性（block/none），它们就不起作用了。一个尚未提及的解决方法是，您可以继续使用display:block/none来隐藏/显示元素，但将其不透明度设置为0，这样即使在显示为display:block时，它仍然是不可见的。

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

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

您可以简单地使用CSS可见性：hidden/visible而不是display:none/block

div {
    visibility:hidden;
    -webkit-transition: opacity 1s ease-out;
    -moz-transition: opacity 1s ease-out;
    -o-transition: opacity 1s ease-out;
    transition: opacity 1s ease-out;
    opacity: 0;
}

parent:hover > div {
    opacity: 1;
    visibility: visible;
}

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

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

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

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

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