Pertanyaan Bagaimana saya bisa mengulang satu set animasi dengan css, di setiap klik menggunakan JQuery?


Saya membuat animasi rotasi di css yang mengambil 1s dan telah 'maju' diatur dengan kelas .comet. Bagaimana saya bisa memulai animasi di setiap klik pada elemen eksterior?

 #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);}
    }

5
2018-02-25 12:11


asal


Jawaban:


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

Sumber daya:

  1. Cara Menangkap Acara Animasi CSS3 di JavaScript
  2. jQuery .one ()

6
2017-12-19 00:44



Tidak yakin saya mengerti Anda dengan benar. Bagaimanapun:

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

http://jsfiddle.net/EPv3B/


3
2018-02-25 12:42



Pada setiap klik dari elemen, Anda menambahkan kelas css ke elemen. periksa kode ini.

jika .comet adalah kelas animasi css Anda kemudian

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

ulangi kode yang sama untuk tidak ada elemen yang ingin Anda terapkan.


0
2018-02-25 12:19



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

Ini berfungsi untuk masalah saya. Saya menghapus kelas itu setelah waktu animasi selesai.


0
2018-02-25 12:43