Bagaimanakah saya boleh mencetuskan semula Animasi CSS WebKit Menggunakan JavaScript?

Mencetuskan semula Animasi CSS WebKit dengan JavaScript

Masalah

Animasi yang ditakrifkan menggunakan peraturan -webkit-animation hanya boleh dicetuskan sekali. Untuk mencetuskan animasi sekali lagi, anda memerlukan cara untuk menetapkannya semula selepas ia selesai.

Penyelesaian

Penyelesaian terletak pada penggunaan acara webkitAnimationEnd, yang dicetuskan apabila animasi CSS WebKit selesai. Dengan menambahkan pendengar acara pada elemen animasi, anda boleh mengesan apabila animasi tamat dan menetapkan semula sifatnya untuk membolehkannya dicetuskan semula.

Pelaksanaan

Plain JavaScript:

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 preventDefault here.
};

jQuery:

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

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

Sokongan Penyemak Imbas Rentas:

Yang disediakan kod berfungsi khusus untuk penyemak imbas WebKit. Untuk menyokong pelayar lain, anda boleh menggunakan pustaka pengesanan ciri seperti ini:

var css3AnimationSupport = (function() {
  var div = document.createElement('div'),
    divStyle = div.style,
    support = {
      transition:
        divStyle.MozTransition === '' ? { name: 'MozTransition', end: 'transitionend' } :
        // Will ms add a prefix to the transitionend event?
        (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))),
      transform:
        divStyle.MozTransform === '' ? 'MozTransform' :
        (divStyle.MsTransform === '' ? 'MsTransform' :
        (divStyle.WebkitTransform === '' ? 'WebkitTransform' :
        (divStyle.OTransform === '' ? 'OTransform' :
        (divStyle.transform === '' ? 'transform' :
        false))))
    };
  support.transformProp = support.transform.name.replace(/([A-Z])/g, '-').toLowerCase();
  return support;
}());

Dengan pustaka ini, anda boleh menggunakan kod berikut:

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

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