Jquery slideToggle messes up flex alignment until it is finished

Question

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:

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

. 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 here). When it's done it centers back, because of a callback function I got from another SO answer.

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...)

Note: If you use slideToggle instead of slideDown, subsequent slides are aligned properly.

Answer 1

jQuery shows and hides item by changing the display, usually between block and none. This interferes with the display: flex, that you use for centering. A simple "low-tech" solution is wrapping the flexbox container with another div (save-footer-container), and showing / hiding said container:

.save-footer-container {
  display: none;
  z-index: 9998;
  position: fixed;
  bottom: 0;  
  width: 100%;
}

.save-footer {
  display: flex;
  height: 3em;
  background: rgb(255, 247, 125);
  color: black;
  align-items: center;
  justify-content: center;
  padding: 0.5em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="$('.save-footer-container').slideDown('medium')">
  Popup
</button>
<div class="save-footer-container">
  <div class="save-footer slider">
    <div class="div-section">
      <p id="save-footer-text">Your changes have not been saved.</p>
    </div>
    <div class="div-section">
      <button onclick="Save()" class="btn btn-info">Save</button>
    </div>
  </div>
</div>