I have encountered an issue with animating the height of a configurable content div, which typically contains paragraphs of text.
Shown below is my animation (slowly paced), starting from a height of 0 and expanding to its calculated height based on its content:
https://i.sstatic.net/gi2MP.gif
Notice the peculiar "hop" at the end?
Upon investigation, I believe I have identified the problem. The div containing the HTML elements is being animated in this manner (done in Angular 2, although it may not be directly related to the issue):
<div [@visibilityStateTrigger]="visibilityState" style="display: block">
<ng-content></ng-content>
</div>
The ng-content tag serves as a placeholder for child elements, while the visibility state controls the animation triggers. It's crucial to note that it's a div containing children.
Being new to web development, I assumed that the div would adjust to the size of its children's content. Initially, it appeared to do so until I tried animating it and observed the odd transition, prompting me to inspect it using Chrome:
Here's how the div looks: https://i.sstatic.net/YENU1.png
<div _ngcontent-8027-15="" style="display: block; opacity: 1;">
<p _ngcontent-8027-11="">
Dissertation I designed an electronic tuning device for a violin including a cost estimate and full circuit diagram of all components.
</p>
</div>
And here's its content: https://i.sstatic.net/vDIcf.png
When collapsed, it merely sets the height and opacity to 0:
<div _ngcontent-8027-15="" style="display: block;height: 0px;opacity: 0;">
<p _ngcontent-8027-11="">
Dissertation I designed an electronic tuning device for a violin including a cost estimate and full circuit diagram of all components.
</p>
</div>
The issue arises during the intermediate stages, presumably due to the way the animation is executed.
I am aware that matching the div's height to the content resolves the problem. Since the parent div is being animated instead of individual child components, only the div's height impacts the animation.
I devised a workaround by using padding instead of margin. However, this necessitates avoiding margins in any styles intended for this component and adjusting every HTML style to use padding over margin.
Is there a method to instruct my div to resize according to the full size of its children, taking into account margins?