1

我试图用 css3 进行淡出转换,但发现显示不适用于转换。

我有一个<div id=groupID>带有<h2>标题的组对象,<div class='group'>并且我有绑定到该对象的 onclick 事件<h2>应该使组类消失。我试图用这个来克服显示问题,因为它与BUT{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

任何想法?

谢谢

4

1 回答 1

3

不要尝试和从auto. 它行不通。

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

于 2012-07-03T13:18:39.230 回答