1

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

这是我的问题，

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

我想为这个切换方法添加 CSS 3 过渡效果。

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

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

为什么它不起作用？我怎样才能做到这一点？

4

1 回答 1

0

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

于 2012-05-20T23:02:09.573 回答