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?
-
Pode demonstrar com código o que ja fez, por favor?– Lucas de CarvalhoCommented 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?– Rafaela LopesCommented 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.– Wallace VizerraCommented 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– hugocslCommented 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.– Wallace VizerraCommented 11/07/2018 às 17:04
2 Respostas
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>
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>
-
-
1Se está usando o
animate.css
, não seria perda de processamento a toa usar jQuery? Commented 11/07/2018 às 16:38 -
1
-
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