CSS3 过渡淡出显示属性

Question

我试图用 css3 进行淡出过渡，但发现显示不适用于过渡。

我有一个带有<h2>标题和<div class='group'>的组对象<div id=groupID>，并且我有 OnClick 事件绑定到应该使组类消失的<h2>。 我试图克服{opacity: 0; height: 0; overflow: hidden;}显示问题 这工作正常，因为它与 {display:none} BUT 具有相同的效果

.CSS

transition: all 2s ;
-webkit-transition: height 2s ease-out;
transition: opacity 2s ease-out ;
display: block;
-webkit-transition: opacity 2s ease-out;

.JS

//collapse function
block.setStyle({opacity: 0});
block.setStyle({height: 0});
//expand function
block.setStyle({opacity: 1});
block.setStyle({height: 'auto'});

它在关闭时不做任何动画，但在重新出现时会淡入。它只是立即消失。

是的，我在 CSS3 中需要它。不，我不能使用 jQuery

知道吗？

谢谢

Answer 1

不要尝试在auto之间转换。 这是行不通的。

您可以使用 JavaScript 计算元素的高度（以像素为单位），并在block.setStyle()调用中使用它。