NOTE: The site where I need to use this effect has a horizontal scroll. I need it with the current code, with the code of this question did not work because the plugin I'm using to do the horizontal scrolling hangs.
I'm wanting when the user clicks the button the div appears coming from the bottom. And when you click the hide button it will be in the other div that it disappears going out to the bottom again.
Another issue is also that when the user has already executed once the action returns to normal. If it tries to run it again it works, it is not the case there because after running it comes over.
Code in codepen as well.
$(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><linkrel="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>