Animate inverted one-button "close"

Question

Animate inverted one-button "close"

Navigation

#1 by (0 votes)

2

I'm developing an animate with JS and CSS, which when clicking the button, the element does bounceOutLeft and Right , and thus shows hidden content. The animation is working, however, like making a "close" button, and when you click on it, the button returns to its place, that is, does the opposite effect? If you made bounceOutLeft , it will 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

javascript css

asked by anonymous 08.04.2014 / 16:00

1 answer

Send and receive SMS via PC Replace list of words in a text

score 0 · Accepted Answer

Leave your HTML like this:

<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>

Add the following to the end of your 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';
});

Alternative

If you want you can also use jQuery which gives you a huge help by displaying / hiding elements with animations. See the jQuery animations documentation here .