Estou desenvolvendo um animate com JS e CSS, que ao clicar no botão, o elemento faz o bounceOutLeft
e Right
, e assim mostra o conteúdo escondido. Está funcionando a animação, porém, como fazer um botão "fechar", e quando clicar nele, o botão volta ao seu lugar, ou seja, faz o efeito ao contrário? Se fez bounceOutLeft
, ele vai fazer o BounceOutRight
.
HTML
<div class="container animated">
<div class="star">★</div>
<span>GIRLS</span>
</div>
<div class="container2 animated">
<div class="star">★</div>
<span>BOYS</span>
</div>
<div id="conteudo">
<span> conteudo </span>
</div>
<div id="conteudo2">
<span> conteudo2 </span>
</div>
CSS
.container {
font-size: 40px;
background: #C9C9C9;
padding: 20px;
width: 100px;
text-align: center;
border-radius: 6px;
margin: 0 auto;
cursor: pointer;
line-height: 20px;
}
.container2 {
font-size: 40px;
background: #C9C9C9;
padding: 20px;
width: 100px;
text-align: center;
border-radius: 6px;
margin: 0 auto;
cursor: pointer;
line-height: 20px;
}
.container span {
display: block;
margin: 12px 0 0 0;
font-size: 16px;
font-weight: bold;
}
.container2 span {
display: block;
margin: 12px 0 0 0;
font-size: 16px;
font-weight: bold;
}
JS
var el = document.querySelector(".container");
var el2 = document.querySelector(".container2");
var controller = Animate(el);
var controller2 = Animate(el2);
var link = document.getElementById('conteudo');
link.style.display = 'none';
var link2 = document.getElementById('conteudo2');
link2.style.display = 'none';
el.addEventListener("click", function() {
// mixture
controller
.add("bounceOutRight");
link.style.display = '';
});
el2.addEventListener("click", function() {
// mixture
controller2
.add("bounceOutLeft");
link2.style.display = '';
});