JQuery slideToggle mixes alignment for flexibility until it's complete

Question

I created a container designed to pop up from the bottom of the site when something isn’t saved (to enable batch saving). I have my content in the center using flexible 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 that when I use jQuery.slideDown (), it does not take into account the centering of flex mode and ends up moving to the left (see JFiddle here ). When he did this, he backed down again due to the callback function that I received from another SO response.

Is there a way to animate this slide without losing alignment? Is there a better way to implement this banner? (I'm not the first developer) ...

. slideToggle slideDown, .

Answer 1

jQuery , display, block none. display: flex, . "" flexbox div (save-footer-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>

Answer 2

, . toggleClass() jQuery CSS transitions. 2 (, . .) .off. , a transition ( on = .save-footer off = .off).

FIDDLE

SNIPPET

.save-footer {
  z-index: 9998;
  position: fixed;
  bottom: 0em;
  height: 3em;
  background: rgb(255, 247, 125);
  color: black;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5em;
  transition: all .7s ease-in;
}
.off {
	height:0;
	visibility:hidden;
	transition: height .5s ease-out, visibility .3s linear 0s;
	}

<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.2.min.js"></script> 
<button onclick="$('.save-footer').toggleClass('off')">
  Popup
</button>

<div class="save-footer slider off">
  <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>