0

I Have an element named 'frame'. I have a button with code linked with 'onlclik'. The idea is apply a height decrease transition to this 'frame'.

This code results into a simple frame hide, without transition.

frame.style.cssText+="transition: height 1500ms; -webkit-transition: height 1500ms;";
frame.style.height = "0px";
//frame.style.display = "block";

(The last line can be applied or not, getting the same result.)

I can play with increasing or decreasing the height, but in both cases the height is applied instantly. There is not transition...

Now the surprising behavioor.... The transition works fine !!! I write any height at the styles chrome debugger window and I see the transition works !!

What is the reason becasue the transition does not work at code level ?

I have another similar transition code for width increase and it works fine.

Any idea? Thanks

civiltomain
  • 1,136
  • 1
  • 9
  • 27

1 Answers1

0

Try setting your height within a setTimeout callback:

frame.style.cssText+="transition: height 1500ms; -webkit-transition: height 1500ms;";
setTimeout(function() { frame.style.height = "0px"; }, 0);

setTimeout with a 0 delay essentially instructs the browser to wait until the current UI thread completes before executing the supplied callback. For more on why setTimeout with a 0 delay is useful, check out this thread.

Community
  • 1
  • 1
André Dion
  • 21,269
  • 7
  • 56
  • 60