Trying to prevent jumping after animating height

[jschins]

I will add a codepen later if needed but want to get the description posted first to see if this is common and an issue that might be solved without one.  I have a hidden element and am animating height and opacity on click of an expand/collapse button.  After the animation is complete I set the height of the element to auto in order to allow the container to grow / shrink if the user deletes/edits/adds contents in the element that was hidden.  

 

I'm setting a height cache on the element and check for that before computing the height on click so if the user abuses the button and clicks rapidly it won't jump.

 

The issue I experienced with the latest attempt was a pause after the height was animated and then a jump in height after I set the height to auto.  What is occurring is one of the child elements of the element I am animating the height of has paddingBottom and that is not being rendered when I get the height of the container and animate the height.  After I set the height of the parent to auto then it the padding is rendered and the height of the parent container jumps.  I had been setting the height to auto after the opacity was done animating which made it jump but after changing that call to immediately after finishing the height it is much better. The lingering issue is if the user abuses the expand collapse button by rapid pressing it jumps unlike the other elements I expand / collapse.  Any ideas / help is appreciated, thanks!

[GreenSock]

Welcome to the forums, @jschins! 

 

Hm, we'd really need to see a reduced test case to see what's going on. How are you getting the height? Using element.offsetHeight? And is it display:none at that point or visibility:hidden? Once we see a codepen, I'm sure we can offer some assistance. 

 

Cheers!

[jschins]

Thanks for the warm welcome!

 

I was able to recreate the behavior in a codepen so hopefully that helps, let me know if I can answer any questions, thanks!

 

See the Pen vzbRQd by mallow33 (@mallow33) on CodePen

[GreenSock]

There are many ways to do this, but here's one: 

 

See the Pen 4c7d642eb43e7243b8063c03c98688e5 by GreenSock (@GreenSock) on CodePen

 

Basically, figure out the height based on the parentNode's change in height. 

 

Does that help? 

 

[jschins]

It didn't immediately do the trick, I'll go over everything in depth and report back.

[jschins]

Here is where I am in the debugging process.  I'm not sure if it will help but I can see what's going on and maybe there is an existing widely used solution.  I wrote that the inner element has paddingBottom in my initial post but that is incorrect, it has marginBottom.  On my test case I am getting a height of 132 if I do window.getComputedStyle(e).height or the e.parentNode.offsetHeight routine you supplied or $(e).outerHeight(true).  If I go directly to the child element and use the $(e).outerHeight(true) I get 156.  I don't want hardcode that or anything so I'm not sure what the best course of action here is.  I'm adding a screenshot of the dev console to illustrate the operations, hopefully it is clear enough.  Thanks for any suggestions.

[GreenSock]

Would you please provide a reduced test case in codepen that demonstrates the issue? I'd like to help, but it's tough to diagnose by just looking at a code screenshot.