Você pode fazer da seguinte forma:
Primeiro altere o position
da div.frente
de absolute
para fixed
para evitar a barra de rolagem horizontal ao movê-la para fora da janela, e adicione a propriedade transition
que irá fazer a animação no CSS:
.frente{
position: fixed; /* POSITION ALTERADO */
top: 0;
right: 0;
display: flex;
height: 100vh;
width: 100vw;
justify-content: center;
align-items: center;
background: #aaa;
transition: right .5s ease-in; /* ANIMAÇÃO */
}
Agora crie uma classe para a div onde o right
será -100vw
, fazendo com que a div se mova para fora da tela à direita:
.frente.sai{
right: -100vw;
}
Quando a div.frente
ganhar a classe .sai
, irá disparar o transition
, onde você pode ajustar o tempo e o tipo de transição: coloquei .5s
, que são 500 milissegundos ou meio segundo, e ease-in
(uma lista de tipos de transições você pode ver neste documento).
Coloque uma classe nas tags <a>
"abrir div" e "fechar div" que irá facilitar bastante no código JS e irá evitar que outros links que você poderá ter na página ative a animação. Coloque a mesma classe nas duas tags. No exemplo abaixo coloquei a classe .controle
:
<div class="atras">
<a class="controle" href="#">abrir div </a>
</div>
<div class="frente">
<a class="controle" href="#">fechar div</a>
</div>
Feito isso, basta fazer um toggle da classe .sai
na div.frente
. Um toggle
basicamente é inserir/retirar a classe do elemento cada vez que é chamado.
Em jQuery ficaria assim:
$(".controle").on("click", function(e){
e.preventDefault();
$(".frente").toggleClass("sai");
});
Em JS puro assim:
const controles = document.querySelectorAll(".controle");
for(let el of controles){
el.onclick = function(e){
e.preventDefault();
document.querySelector(".frente").classList.toggle("sai");
}
}
O e.preventDefault();
é para evitar que o href="#"
acrescente a hash
#
no final da URL da página.
Vou colocar um exemplo abaixo usando jQuery, mas você pode trocar pela versão em JS puro se quiser:
$(".controle").on("click", function(e){
e.preventDefault();
$(".frente").toggleClass("sai");
});
.atras{
display: flex;
flex: 1;
height: 100vh;
justify-content: center;
align-items: center;
}
.frente{
position: fixed;
top: 0;
right: 0;
display: flex;
height: 100vh;
width: 100vw;
justify-content: center;
align-items: center;
background: #aaa;
transition: right .5s ease-in;
}
.frente.sai{
right: -100vw;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="atras">
<a class="controle" href="#">abrir div </a>
</div>
<div class="frente">
<a class="controle" href="#">fechar div</a>
</div>