0

this is kind of javascript/browser theoretical question. My colleague and I are trying to write jQuery slideUp method in vanilla JS. The important part of the function body reads:

// initial height needs to be set
if (!element.style.height) {
    element.style.height = `${element.scrollHeight}px`;
}

element.style.overflowY = 'hidden';

element.style.transition = `height ${duration / 1000}s ease-out`;

element.style.height = '0';

This does not work, it slides up without animation. It is like the code in if statement was not executed, but it is in our scenario. Reaplacing the last line with setTimeout works, of course:

setTimeout(function() {
    element.style.height = '0';
}, 50);

The question is, why does the first case not work? I beilieve it is becouse the value of height is not really changed, but "rewritten" instead, so to speak. Something like height = '250px' = '0px', almost, at least, there is some tiny delay though.So is it, that the browser does not register the delay of change in height? Or is the value simply rewritten immediatelly, so it is like the initial height was not set at all? Is it therefore necessary to use setTimout(), or can one avoid it?

My colleague claims that when he set the timeout function to 10ms, it did not work. But I think that was a coincidence, it worked for me even with 0ms (as it should, if I understand asynchronous calling correctly). Thank you for any explanation.

jjakkubb
  • 83
  • 5
  • 2
    You don't necessarily need the timeout, [see an explanation](https://stackoverflow.com/a/49286660/1169519) of what's going on in your code. – Teemu Oct 27 '20 at 18:25
  • @Teemu thank you, the explanation helped. – jjakkubb Oct 27 '20 at 18:30
  • Just to clarify, a timeout should be preferred on large pages, recalculating the DOM is a time-costing operation on large pages, and by using a timeout you can skip an extra recalculation. – Teemu Oct 27 '20 at 18:35

0 Answers0