0

I've have had success when using style sheets, but doing it in JavaScript isn't working for me. I need to do this programatically. Hopefully you will have realised that I'm trying to make the div 'grow'.

var myElement = document.createElement('div');
myElement.style.height = '0px';
myElement.style.padding = '0px';
myElement.style.webkitTransition = '2s'; /* problem with this line ? */
myElement.style.height = '200px';
thomas-peter
  • 7,738
  • 6
  • 43
  • 58
  • 1
    You created an element, but didn't add it to the DOM – Alvin Wong Jul 26 '12 at 15:24
  • you mean like this... layout.messageBox.insertBefore( alert, layout.messageBox.firstChild ); – thomas-peter Jul 26 '12 at 15:25
  • possible duplicate of [webkit transition syntax in javascript?](http://stackoverflow.com/questions/7411305/webkit-transition-syntax-in-javascript) – Bergi Jul 26 '12 at 15:27
  • @AlvinWong is that all that you think is wrong? – thomas-peter Jul 26 '12 at 15:28
  • @Bergi unfortuantely the other question doesn't offer a solution. – thomas-peter Jul 26 '12 at 15:31
  • 1
    shadowing alert, not adding it in the dom, wrong syntax for the transition and not forcing reflow are the issues from the top of my head – Esailija Jul 26 '12 at 15:36
  • 1
    @tomwrong: the solution there [works for me](http://jsfiddle.net/7b4VZ/48/) – Bergi Jul 26 '12 at 15:38
  • @Esailija okay thanks, I've changed the variable name. Now according to Bergi and his down syndrome child example, *.style.setProperty() is the way forward which I have tried without success. So, what do you mean by forcing reflow? – thomas-peter Jul 26 '12 at 15:42
  • 1
    @tomwrong setting a timer to change the height implicitly does it already. If you want it to animate right as you insert it, you need to force reflow (by writing `alert.offsetWidth;` for example) and then change the property you want to animate. It's not pretty but it's much prettier than a 1 ms timer. – Esailija Jul 26 '12 at 15:45
  • Thanks everyone for you input. It all makes sense now. Points all round! – thomas-peter Jul 26 '12 at 15:50

1 Answers1

1

I am not familiar with css3, but according to what I've tried this work:

var myElement = document.createElement('div');
myElement.style.height = '0px';
myElement.style.padding = '0px';
myElement.style.height = '0';
myElement.style.webkitTransition = '2s';
// Append the element to DOM
document.getElementById("a").appendChild(myElement);
// Alter the height after forcing a reflow
myElement.offsetWidth=myElement.offsetWidth;
myElement.style.height = '200px';​
/*// Alter the height later
setTimeout(function() {
    myElement.style.height = '200px';
}, 1);​*/

Thanks to Esailija, you need to force a reflow, as stated in this answer of a question. Accessing properties such as offsetWidth will force a reflow, so that's a better way than a timer.

Community
  • 1
  • 1
Alvin Wong
  • 12,210
  • 5
  • 51
  • 77
  • BINGO. Nice one. so the timeout allows the renderer some 'breathing' time. Am I right? Thank you. – thomas-peter Jul 26 '12 at 15:44
  • Yeah, I think it's to do with giving the thread up to the renderer first. The timeout obviously sets an even which won't fire until the renderer catches up – thomas-peter Jul 26 '12 at 15:52
  • ahh okay. 'reflow', good word to know. Slowing getting this web browser thang. – thomas-peter Jul 26 '12 at 15:57
  • personally I prefer the timeout but i THINK it does the same thing. It does make me ever so curious as to exactly WHY the myElement.offsetWidth=myElement.offsetWidth works. – thomas-peter Jul 26 '12 at 15:59