Bagaimana untuk Memulakan Semula Animasi CSS WebKit Menggunakan JavaScript?

Cara Mencetuskan Semula Animasi CSS WebKit melalui JavaScript

Soalan ini menangani isu mencetuskan semula animasi CSS menggunakan JavaScript. Peraturan animasi sedia ada "@-webkit-keyframes goncang" mentakrifkan kesan gegaran, tetapi percubaan berikutnya untuk mengaktifkannya semula melalui JavaScript terbukti tidak berjaya.

Penyelesaian yang disediakan memanfaatkan acara "animationEnd", khususnya "webkitAnimationEnd" untuk pelayar WebKit. Apabila acara ini dicetuskan, ia menunjukkan siapnya animasi.

Untuk mencetuskan semula animasi, pendengar acara ditambahkan pada elemen untuk acara "webkitAnimationEnd". Setelah menerima acara ini, sifat gaya "webkitAnimationName" elemen itu dikosongkan, menetapkan semula animasi dengan berkesan.

Contoh (JavaScript Vanila Biasa):

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

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

document.getElementById('button').onclick = function(){
    element.style.webkitAnimationName = 'shake';
    // You may want to prevent default action here.
};

Contoh (jQuery):

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

$('#button').click(function(){
    $element.css('webkitAnimationName', 'shake');
    // You may want to prevent default action here.
});

Sokongan Silang Penyemak Imbas:

Untuk sokongan merentas pelayar, objek "css3AnimationSupport" boleh digunakan untuk mengesan CSS sifat peralihan, transformasi dan animasi yang disokong oleh penyemak imbas yang berbeza.

var css3AnimationSupport = (function(){
    var div = document.createElement('div'),
        divStyle = div.style;

    return {
        transition: (function(){
            return divStyle.MozTransition     === ''? {name: 'MozTransition'   , end: 'transitionend'} :
                (divStyle.MsTransition     === ''? {name: 'MsTransition'    , end: 'msTransitionend'} :
                (divStyle.WebkitTransition === ''? {name: 'WebkitTransition', end: 'webkitTransitionEnd'} :
                (divStyle.OTransition      === ''? {name: 'OTransition'     , end: 'oTransitionEnd'} :
                (divStyle.transition       === ''? {name: 'transition'      , end: 'transitionend'} :
                false))));
        })()
        // ... Other detections omitted for brevity
    };
}());

Atas ialah kandungan terperinci Bagaimana untuk Memulakan Semula Animasi CSS WebKit Menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!