Geek Answers Handbook

Event lost after css animation

For fun, I put a roll of Google-esk barrels on one of my sites.
Everything works fine the first time a selected item is clicked, but after that it does not light up.

I tried .click , .on('click', function() {}) and did not work.
Any ideas on how to fix it and why this is happening?

The main jsFiddle is here

Source code example;

 <html> <head> <title> Roll Me </title> <style type="text/css"> </style> <script> $(function() { $('#roll').on('click', function() { $('body').css({ "-moz-animation-name": "roll", "-moz-animation-duration": "4s", "-moz-animation-iteration-count": "1", "-webkit-animation-name": "roll", "-webkit-animation-duration": "4s", "-webkit-animation-iteration-count": "1" }); }); }); </script> </head> <body> <div id="roll"> <h1>click me</h1> </div> </body> </html>
+5
source share
5 answers

You need to remove the animation that you applied after it was completed, and then re-add it on subsequent clicks.

 var $body = $('body'); $('#roll').on('click', function() { $body.addClass('barrel-roll'); }); $body.on('animationEnd webkitAnimationEnd mozAnimationEnd',function(e) { $body.removeClass('barrel-roll'); }); 
 @-webkit-keyframes roll { from { -webkit-transform: rotate(0deg) } to { -webkit-transform: rotate(360deg) } } @-moz-keyframes roll { from { -moz-transform: rotate(0deg) } to { -moz-transform: rotate(360deg) } } @keyframes roll { from { transform: rotate(0deg) } to { transform: rotate(360deg) } } .barrel-roll { -webkit-animation-name: roll; -webkit-animation-duration: 4s; -webkit-animation-iteration-count:1; -moz-animation-name: roll; -moz-animation-duration: 4s; -moz-animation-iteration-count:1; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="roll"> <h1>click me</h1> </div>
+5
source

This is because, at this point, the body element already has a CSS style. The fix is ​​to remove the style properties from your body element:

 setTimeout(function() { $('body').removeAttr('style'); }, 4000);

I used setTimeout here so that the style attribute gets reset only after the animation is complete (after 4 seconds).

JSFiddle demo .

+3
source

This is not a click handler. You can check this with console.log . You need to reset the animation.

0
source

After the animation is complete, you have already installed the animation! The only way to solve this is to delete it again and then restart it. However, the best way to do this is with CSS classes:

 var busy = false; $('#roll').on('click', function() { if(busy) return; else busy = true; $('body').addClass("do-the-barrel-roll"); setTimeout(function(){ $('body').removeClass("do-the-barrel-roll"); busy = false; }, 2100); }); 
 @-webkit-keyframes roll { from { -webkit-transform: rotate(0deg) } to { -webkit-transform: rotate(360deg) } } @-moz-keyframes roll { from { -moz-transform: rotate(0deg) } to { -moz-transform: rotate(360deg) } } @keyframes roll { from { transform: rotate(0deg) } to { transform: rotate(360deg) } } body.do-the-barrel-roll { -webkit-animation: roll 2s; -moz-animation: roll 2s; animation: roll 2s; -webkit-animation-fill-mode: backwards; -moz-animation-fill-mode: backwards; animation-fill-mode: backwards; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <div id="roll"> <h1>click me</h1> </div>

Just add a class and delete it after the time it takes to complete the animation. In addition, I added busy to prevent multiple clicks from creating this hell.

0
source

What happens is that css is applied. Since it is already applied, then when it is applied again at the next click, nothing happens. I created something that works by adding a class and then deleting after a timeout that matches the length of the animation. https://jsfiddle.net/5yqrxvkd/3/

 $('#roll').on('click', roll); function roll(){ $('body').addClass("animate"); setTimeout(function(){ $("body").removeClass("animate"); }, 4000); }

Perhaps the best way to use animation or something else, but I'm not so good at it.

0
source

More articles:


All Articles