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

Question

首先，我必须说我正在网站上工作，我只能操纵它的CSS。 所以，请不要建议我使用javascript / html解决方案。

这是我的问题，

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

我想将CSS 3 Transitions效果添加到此切换方法。

As Jim Jeffers's answer on this question，过渡效果永远不会起作用

display: block＆lt; - ＆gt; display: none

所以我总是需要保留元素显示块。

我尝试了这个，但它没有用，

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

为什么不工作？我怎么能这样做？

Answer 1

尝试在max-height而不是height上使用过渡。