Bootstrap is being used to showcase a modal dialog, with jQuery handling the dynamic display and hiding of certain elements within the modal. The issue at hand is that whenever an item is shown or hidden, the modal immediately resizes. The desired outcome is for it to smoothly transition to the new size using either a jQuery or CSS animation.
An attempt was made to achieve this with CSS by using the following code:
.modal {
flex-grow: 1;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
Unfortunately, this approach did not work as expected.
Below is an example of the modal currently in use:
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<p>A paragraph</p>
</div>
</div>
</div>
Your assistance on this matter is greatly appreciated. Thank you!