0

Como adicionar o efeito de animação apenas quando o objeto for clicado? Já estou utilizando animações com o animate.css, mas gostaria que o efeito iniciasse apenas quando eu clicar em cima. Como fazer isso?

8
  • Pode demonstrar com código o que ja fez, por favor? Commented 11/07/2018 às 16:22
  • mas eu não sei como faz, por isso estou perguntando =) só estou usando animação simples. Por exemplo: <h1 class="animated shake">Animação quando clica</h1>. Daí a animação ocorre assim q eu atualizo a página, mas quero que ela inicie somente depois que eu clicar nesse h1, entendeu? Commented 11/07/2018 às 16:25
  • Fizeram uma edição aí colocando jQuery. A @RafaelaLopes está realmente a usar jQuery ou não? Essa informação não estava aí inicialmente. Commented 11/07/2018 às 16:54
  • @WallaceMaxters desculpe se deixe as coisas confusas, eu mesmo tinha incluido as tag novas, pois elas foram usadas para fazer o Click na animação, apenas por fins de pesquisa no futuro etc, já que foram usados na resposta. Sem o js seria mais complexo fazer o gatilho da animação como as classes originais do animated.css
    – hugocsl
    Commented 11/07/2018 às 17:03
  • 1
    @hugocsl eu até entendi seu ponto. Relativamente, as coisas com jQuery costuma (ou costumava) ser mais simples, mas no caso em questão, observe que seu código praticamente tem a mesma quantidade de linhas que a do Guilherme. Commented 11/07/2018 às 17:04

2 Respostas 2

6

Não precisa colocar um biblioteca inteira e relativamente pesada como jQuery só para usar animate.css

basta adicionar as classes com .className ao elemento desejado, e usar os eventos webkitAnimationEnd, mozAnimationEnd, MSAnimationEnd, oanimationend e animationend (eventos para browsers antigos e novos, para manter a compatibilidade) para detectar quando a animação terminou

Exemplo quando clicar no h1:

var foo = document.querySelector('#foo');

foo.addEventListener('click', function () {
    foo.className = 'animated bounce';
});

foo.addEventListener('webkitAnimationEnd', removeClass);
foo.addEventListener('mozAnimationEnd', removeClass);
foo.addEventListener('MSAnimationEnd', removeClass);
foo.addEventListener('oanimationend', removeClass);
foo.addEventListener('animationend', removeClass);

function removeClass()
{
   foo.className = '';
}
h1 {
    color: #f35626;
    background: -webkit-linear-gradient(92deg,#f35626,#feab3a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 48pt;
    text-align: center;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

<h1 id="foo">Stack Overflow</h1>

exemplo quando clicar em outro elemento:

var foo = document.querySelector('#foo');
var botao = document.querySelector('#animar');

botao.addEventListener('click', function () {
    foo.className = 'animated bounce';
});

foo.addEventListener('webkitAnimationEnd', removeClass);
foo.addEventListener('mozAnimationEnd', removeClass);
foo.addEventListener('MSAnimationEnd', removeClass);
foo.addEventListener('oanimationend', removeClass);
foo.addEventListener('animationend', removeClass);

function removeClass()
{
   foo.className = '';
}
h1 {
    color: #f35626;
    background: -webkit-linear-gradient(92deg,#f35626,#feab3a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 48pt;
    text-align: center;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

<h1 id="foo">Stack Overflow</h1>

<button id="animar">Animar</button>

3

Com jQuery, você pode adicionar a class do Animated.css em uma função click.

Edit. Na documentação existem alguns métodos para verificar o fim da animação, sendo assim inclui na resposta essa opção para o usuário poder clicar e fazer a animação sempre que quiser (agradecimento ao sr. @dvd pela ajuda)

Veja o exemplo

$(document).ready(function () {
$(".box").on("click", function(){
    var box = $(this);
    var classes = "animated wobble";
    box.addClass(classes)
    .on("animationEnd oAnimationEnd mozAnimationEnd webkitAnimationEnd", function(){
        box.removeClass(classes);
    });
});
});
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.box {
 cursor: pointer;
 display:inline-block;
 }
<link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"
    />
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

    <div class="box">
        <img src="http://placecage.com/100/100">
    </div>

        

14
  • que simples!!! deu certo! Muito obrigada! Commented 11/07/2018 às 16:28
  • 1
    Se está usando o animate.css, não seria perda de processamento a toa usar jQuery? Commented 11/07/2018 às 16:38
  • 1
    Bem melhor usar animação com CSS do que as do jQuery. :D
    – Sam
    Commented 11/07/2018 às 16:49
  • 1
    @dvd pois é, mas agora que eu vi que a pergunta foi editada. Quando fiz o comentário, acho que as tags não estava lá. Acho que o AP acabou não especificando tal coisa. De qualquer forma, se a própria lib incentiva usar jQuery, fazer o quê, né? Ultimamente, tenho sido um evangelizador anti-jQuery Commented 11/07/2018 às 16:50
  • 2
    @hugocsl a ideia de ter um "trigger" eu acho até boa, só não gosto de carregar todo o resto do jQuery. Eu até acho que tem umas libs alternativas (mais leves) que o jQuery. Commented 11/07/2018 às 17:01

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 .