out display property

I was trying to make fade out transition with css3 but found out that display is not working with transitions.

i have a group object <div id=groupID> with <h2> title and <div class='group'> and i have onclick event bind to <h2> that should make group class to dissapear. i've tried to overcome display problem with {opacity: 0; height: 0; overflow: hidden;} {opacity: 0; height: 0; overflow: hidden;} {opacity: 0; height: 0; overflow: hidden;} This works fine as it has same effect as {display:none} BUT with

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

it doesn't do any animation on close but it fades in on reappearance. It just disappear instantly.

yes i need it in CSS3. NO, i can't use jQuery

any idea?

Thanks

---

Don't try and transition to and from auto . It won't work.

You may be able to calculate the height in pixels of the element with JavaScript and use that in your block.setStyle() calls.

链接地址: http://www.djcxy.com/p/27416.html

上一篇: 使用CSS转换悬停时SVG路径的填充属性

下一篇: 显示属性