如果您将 display 属性从 none 切换为 block，其他元素上的转换将不会发生。强>

要解决此问题，请始终允许元素为 display: block，但通过调整以下任一方式来隐藏元素：

1. 将高度设置为0。
2. 将不透明度设置为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;
}