1

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

Mazmart
  • 2,703
  • 4
  • 17
  • 20

1 Answers1

3

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.

Community
  • 1
  • 1
robertc
  • 74,533
  • 18
  • 193
  • 177