Activate animate.css only when object is clicked

Navigation
0

How to add the animation effect only when the object is clicked? I'm already using animate.css animations, but I'd like the effect to start only when I click on it. How to do this?

    
asked by anonymous 11.07.2018 / 18:09

2 answers

3

With jQuery, you can add the class of Animated.css to a click function.

Edit. In the documentation there are some methods to check the end of the animation, so include in the response this option for the user to click and do the animation whenever you want (thanks to Mr. @dvd for help)

See the example 

$(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><divclass="box">
        <img src="http://placecage.com/100/100">
    </div>
    
11.07.2018 / 18:24
6

No need to put a whole and relatively heavy library like jQuery just to use animate.css

Just add the classes with .className to the desired element, and use the events webkitAnimationEnd , mozAnimationEnd , MSAnimationEnd , oanimationend and animationend (events for old and new browsers, to maintain compatibility ) to detect when the animation has finished

Example when you click on 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>

Example when clicking another element: 

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>
    
11.07.2018 / 18:33
Change Mysql data in PHP Sort a SELECT in MySql by a letter