Bagaimanakah Saya Boleh Mencetuskan Semula Animasi CSS WebKit secara Dinamik?

Mencetuskan Semula Animasi CSS WebKit Secara Dinamik

Apabila bekerja dengan animasi CSS yang dikuasakan oleh WebKit, mungkin terdapat keadaan di mana anda perlu semula mencetuskan animasi selepas pelaksanaan awalnya. Untuk mencapai matlamat ini tanpa bergantung pada tamat masa atau berbilang animasi, kami boleh memanfaatkan acara terbina dalam: "webkitAnimationEnd."

Acara ini menyala apabila animasi selesai, membolehkan kami menetapkan semula dan memulakan semula secara pemprograman. Begini caranya:

Dalam JavaScript Biasa:

var element = document.getElementById('box');

element.addEventListener('webkitAnimationEnd', function(){
    this.style.webkitAnimationName = '';
}, false);

document.getElementById('button').onclick = function(){
    element.style.webkitAnimationName = 'shake';
    // Prevent default browser behavior here if needed.
};

Dalam jQuery:

var $element = $('#box').bind('webkitAnimationEnd', function(){
    this.style.webkitAnimationName = '';
});

$('#button').click(function(){
    $element.css('webkitAnimationName', 'shake');
    // Prevent default browser behavior here if needed.
});

Pendekatan ini menyediakan cara yang bersih dan berkesan untuk mencetuskan semula animasi CSS atas permintaan. Ia menghapuskan keperluan untuk tamat masa yang kompleks atau animasi tambahan, memastikan peralihan yang lancar dan lancar.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencetuskan Semula Animasi CSS WebKit secara Dinamik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!