jschins

I think my issue is the timing relationship between how long it takes to animate the height vs how long it takes to animate the opacity to 1. It seems like the height of the element plays a part in the animation looking smooth / good. I'm not sure why though, if the amount of time it takes to animate the height stays the same it seems like the height and opacity relationship should stay constant and not degrade as the height increases. I'll work on creating a code pen, I just wasn't sure if this was a common topic / problem in the animation community.

I have had some functions in my project to animate some forms from opacity / height 0 to to opacity: 1 height: auto when a new form appears on the screen. These forms have always had static content so I could time things correctly in my functions. We now want to try to apply this type of animation to forms that have a configurable number of fields so the size of the form will be unknown. I'm wondering if calculating the height of the element and then applying a modification to the time component in the animation would be a standard way people do this or if there is some standard way of doing this I have not encountered. Thanks for any help!

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.

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

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! codepen

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!