Animations #8

HTML

<link rel="stylesheet" href="http://krasimirtsonev.com/blog/articles/HTMLAnimations/examples/animate.css">
<script src="http://krasimirtsonev.com/blog/articles/HTMLAnimations/examples/animate.js"></script>
<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>

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;
}
.container span {
    display: block;
    margin: 12px 0 0 0;
    font-size: 16px;
    font-weight: bold;
}

JavaScript

var el = document.querySelector(".container");

var controller = Animate(el);

var link = document.getElementById('conteudo');
link.style.display = 'none';

el.addEventListener("click", function() {
    
    // mixture
    controller
    
    .add("bounceOutRight");
    link.style.display = '';  
});

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