title: How do I animate a modal resize with javascript, jquery, or css?
body: <p>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.</p>
  
  <p>I tried to accomplish this with css with:</p>
  
  <pre><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;
  }
  </code></pre>
  
  <p>But that didn't work. </p>
  
  <p>Here is an example modal I'm using:</p>
  
  <pre><code>&lt;div id="myModal" class="modal fade" role="dialog"&gt;
      &lt;div class="modal-dialog"&gt;
          &lt;div class="modal-content"&gt;
             &lt;p&gt;A paragraph&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Thanks for your help with this-</p>