CSS3 过渡淡出显示属性

Question

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

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

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

不要尝试和transition to and from auto。它不会工作。

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