Làm thế nào tôi có thể lặp lại một tập phim hoạt hình với css, tại mỗi nhấp chuột bằng cách sử dụng JQuery?

Question

Tôi đã tạo một hoạt ảnh xoay trong css mất 1s và có 'forwards' được đặt bằng lớp .comet. Làm thế nào tôi có thể có hình ảnh động bắt đầu ở mỗi nhấp chuột vào một yếu tố bên ngoài?

#carousel #big_bubble #cometa.rotation{animation:rotation 1s forwards; -moz-animation:rotation 1.5s forwards; -webkit-animation:rotation 1s forwards; -o-animation:rotation forwards 1s; } 
    @-moz-keyframes rotation{ 
     from{transform:rotate(0deg);} 
     to{transform:rotate(-360deg);} 
@-webkit-keyframes rotation{ 
     from{-webkit-transform:rotate(0deg);} 
     to{-webkit-transform:rotate(-360deg);} 
    } 

Answer 1

$(function() {// Shorthand for $(document).ready() 
    $(".trigger").click(function(e) { 
     e.preventDefault(); 
     $(this).addClass("animation").one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", function(){ 
      $(this).removeClass("animation"); 
     }); 
    }); 
}); 

Resources:

1. How to Capture CSS3 Animation Events in JavaScript
2. jQuery .one()

Answer 2

Trên mỗi nhấp chuột của phần tử bạn thêm lớp css vào phần tử. kiểm tra mã này.

nếu .comet là css của bạn hoạt hình lớp sau đó

$(document).ready(function(){ 
    $('#everybutton_element_id').click(function (e) { 
      $(this).addClass('comet'); 
      $(this).delay(2000).removeClass('comet'); 
    }); 
}); 

lặp lại cùng mã cho bất kỳ không có các yếu tố trên mà bạn muốn thực hiện nó.

Answer 3

Không chắc tôi hiểu bạn đúng. Dù sao:

$('#button').click(function() { 
    var el = $('#cometa').addClass('rotation'); 
    setTimeout(function() { 
     el.removeClass('rotation'); 
    }, 1000); 
}); 

http://jsfiddle.net/EPv3B/

Answer 4

$('body').on('click', '#next', function() { 
    $("#cometa").addClass("rotation"); 
    setTimeout(function() { 
    $("#cometa").removeClass('rotation'); 
}, 1500); 
}); 

này hoạt động cho vấn đề của tôi. Tôi xóa lớp đó sau khi thời gian hoạt ảnh kết thúc.