CSS3过渡淡出显示属性

Question

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

我有一个具有<div id=groupID>标题和<h2>的组对象<div class='group'>，并且我有onclick事件绑定到<h2>，这应该使组类消失。我试图用{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()调用中使用它。