Bagaimanakah saya boleh mencetuskan semula Animasi CSS WebKit dengan JavaScript?

Mencetuskan semula Animasi CSS WebKit dengan JavaScript

Dalam CSS, animasi ialah urutan terhad masa yang boleh digunakan pada elemen menggunakan @ peraturan -webkit-keyframes. Walau bagaimanapun, dalam beberapa kes, anda mungkin perlu mencetuskan semula animasi tanpa menggunakan tamat masa atau berbilang animasi.

Satu penyelesaian terletak pada penggunaan acara animationEnd, yang dicetuskan apabila animasi selesai. Dalam pelayar WebKit, acara ini dikenali sebagai webkitAnimationEnd. Dengan melampirkan pendengar acara pada elemen, anda boleh menetapkan semula animasi sebaik sahaja ia selesai.

Tetapan Semula Terdorong Peristiwa

Dalam JavaScript vanilla:

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

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

document.getElementById('button').onclick = function(){
    element.style.webkitAnimationName = 'shake';
};

Dalam jQuery:

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

$('#button').click(function(){
    $element.css('webkitAnimationName', 'shake');
});

Keserasian Merentas Pelayar

Untuk sokongan merentas pelayar, perpustakaan seperti ujian peralihan CSS3 boleh digunakan. Ia menyediakan objek sokongan yang mengesan pelbagai sifat dan acara CSS, termasuk sokongan animasi:

var css3AnimationSupport = (function(){
    var div = document.createElement('div'),
        divStyle = div.style,
        support = {
            transition: ...
            transform: ...
            animation: ...
        };
}());

Dengan menggunakan objek sokongan ini, adalah mungkin untuk mengesan sifat animasi dan acara untuk setiap penyemak imbas, membolehkan pengendalian yang konsisten animasi CSS merentas berbilang platform.

Atas ialah kandungan terperinci Bagaimanakah saya boleh mencetuskan semula Animasi CSS WebKit dengan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!