title: Jquery slideToggle messes up flex alignment until it is finished
body: <p>I've created a container that is meant to slide out from the bottom of a site when something isn't saved (to enable batch saving).  I have my content centered, using flex mode using this css:</p>
  
  <pre><code>.save-footer {
      z-index: 9998; position: fixed; bottom:0; height:3em;
      background: rgb(255, 247, 125);
      color: black;
      width:100%;
      display:flex;
      align-items: center;
      justify-content: center;
      padding:0.5em;
  }
  </code></pre>
  
  <p>.  The problem is when I use jQuery.slideDown(), it doesn't respect the flex mode centering, and ends up going to the left (see jFiddle <a href="https://jsfiddle.net/xym7mxfh/" rel="nofollow noreferrer">here</a>). When it's done it centers back, because of a callback function I got from another SO answer.</p>
  
  <p>Is there a way to animate that slide without having losing the alignment? Is there a better way to implement this banner entirely? (I'm not primarily a front-end developer...)</p>
  
  <p>Note: If you use slideToggle instead of slideDown, subsequent slides are aligned properly.</p>