jquery - Animate element in input and output with my current code

Question

NOTE: The site where I need to use this effect has a horizontal scroll. I need with the current code, with the code of this question didn’t work because the plugin I’m using to make the horizontal scrolling hangs.

I’m hoping that when the user clicks the div button to appear from the bottom. And when you click the hide button it will be in the other div it disappears leaving for the bottom again.

Another issue is that when the user has already executed once the action returns to normal. That if he tries to run it again it works, it’s not the case there because after executed it comes over.

Code in the codepen also.

$(document).on('click', '#mostrar', function(){
      $('.secundaria').css('display','block');
    });
    $(document).on('click', '#esconder', function(){
      $('.secundaria').css('display','none');
      $('.secundaria').removeClass('slideInUp');
      $('.secundaria').addClass('slideInDown');
    });

* {margin:0;}
.principal {background: #6EC24E;height: 100vh;z-index:1;}
.secundaria {background: #538193;height: 100vh;z-index:2;position:absolute;top: 0;width: 100%;display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
<div class="principal">
  <h1>Div Principal</h1>
  <button id='mostrar'>mostrar</button>
</div>
<div class="secundaria animated slideInUp">
  <h2>Div Secundária</h2>
  <button id='esconder'>esconder</button>
</div>