如何将显示切换效果转换为CSS 3转换效果

首先，我必须说我正在开发一个只能操作CSS的网站。 所以，请不要向我推荐javascript/html解决方案

这是我的问题

从中可以看出，有一个基本的切换显示方法，但它对默认CSS没有过渡效果。HTML就是这样，我没有更改HTML或javascript的权限，我只能使用CSS

我想在这个切换方法中添加CSS 3转换效果

，过渡效果在上永远不起作用

显示：块

<->

显示：无

因此，我将始终需要保留元素显示块

我试过了但没用

.infocontent {
    -webkit-transition: opacity 1s ease-out;
}
div[style='display: block; '].infocontent { 
   opacity: 1; height: auto !important;
}
div[style='display: none; '].infocontent {
   display:block !important;  opacity: 0; height: 0px; 
}

---

为什么不起作用？我该怎么做呢？

试着在“最大高度”上使用“过渡”，而不是“高度”。

我认为他不是在尝试过渡高度，只是不透明度。不过，我不确定这到底应该是什么样子；在这种情况下，高度似乎是自然过渡。是的，在这种情况下，高度似乎是自然过渡，但不能从高度过渡：自动；（这就是我建议最大高度的原因）。@Ana，不，它不起作用，事实上我可以设置一个特定的高度，这并不重要。伙计，有时候我觉得我只是在说一种虚构的语言或什么。我遇到了同样的问题，我不能使用fx jquery.hide（100）或.show（100）函数，因为它们在我的网站上造成了奇怪的间距（这是不可接受的）. 如果我使用display:block；和显示：无；然而，间距消失了，但是我缺少jquery所带来的酷的过渡效果。