2

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 = '';  
});

JSFiddle

1 Resposta 1

0

Deixe o seu HTML assim:

<div class="container animated">
    <div class="star">★</div>
    <span>GIRLS</span>
</div>

<div id="conteudo">
    <span> conteudo </span>
    <button id='botao'>Fechar</button> <!-- adicione esse botão -->
</div>

Adicione o seguinte ao final do seu JavaScript:

document.getElementById('botao').addEventListener('click', function() {
    //remove a classe da animação e torna a div visível novamente
    controller.remove('.bounceOutRight');
    //oculta a div de conteúdo
    link.style.display = 'none';
});

Veja também no JSFiddle

O mesmo vale para o segundo link/conteúdo.

Alternativa

Se você quiser também pode usar o jQuery que te dá uma ajuda enorme ao exibir/ocultar elementos com animações. Veja a documentação de animações do jQuery aqui.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .