CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrapbootstrap-4
user2682863
user2682863

Reputation: 3218

How do I animate a modal resize with javascript, jquery, or css?

I'm using bootstrap to display a modal dialog and jquery to dynamically show/hide some elements of the modal. The problem I have is that when I show or hide an item the modal immediately resizes. What I'd like to do is have it transition to the new size either with a jquery or css animation.

I tried to accomplish this with css with:

.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;
}

But that didn't work.

Here is an example modal I'm using:

<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
           <p>A paragraph</p>
        </div>
    </div>
</div>

Thanks for your help with this-

Upvotes: 0

Views: 3811

Answers (1)

gforce301
gforce301

Reputation: 2984

Apparently animating an element when content is added to it with css or javascript is almost impossible. I still didn't find a way to do it with css only. It has to do with the browser immediately rendering the content and updating the auto height element. This apparently does not trigger any of the css transitions. To make this worse it's the same when using javascript. The technique used here is from this answer and is a jQuery solution: https://stackoverflow.com/a/1520352/1819684

I think this is what you're looking for.

$('#add-content').on('click', function() {
  $('<p>Moar Stuff</p>').css({display: 'none'}).appendTo(('.modal-body')).show('slow');
});
.modal-body {
overflow:hidden;
  transition:transform 19s ease-out; // note that we're transitioning transform, not height!
  height:auto;
  transform:scaleY(1); // implicit, but good to specify explicitly
  transform-origin:top; // keep the top of the element in the same place. this is optional.
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
  Launch demo modal
</button>



<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p id="content">...</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary" id="add-content">Add Content</button>

      </div>
    </div>
  </div>
</div>

Upvotes: 3

Related Questions