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

Question

首先，我不得不说我正在开发我只能操纵其CSS的网站。所以，请不要建议我使用javascript/html解决方案。

这是我的问题，

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

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

正如吉姆·杰弗斯(Jim Jeffers(对这个问题的回答，过渡效应永远不会起作用

display: block <-> 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

尝试在最大高度而不是高度上使用过渡。