How Can I Re-trigger WebKit CSS Animations Using JavaScript?-CSS Tutorial-php.cn

How Can I Re-trigger WebKit CSS Animations Using JavaScript?

Barbara Streisand

Release： 2024-11-30 12:29:13

Original

638 people have browsed it

How Can I Re-trigger WebKit CSS Animations Using JavaScript?

Re-triggering WebKit CSS Animations with JavaScript

Problem

Animations defined using the -webkit-animation rule can only be triggered once. To trigger the animation again, you need a way to reset it after it has completed.

Solution

The solution lies in utilizing the webkitAnimationEnd event, which is fired when a WebKit CSS animation finishes. By adding an event listener to the animated element, you can detect when the animation ends and reset its properties to allow it to be triggered again.

Implementation

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

Copy after login

jQuery:

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

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

Copy after login

Cross-Browser Support:

The provided code works specifically for WebKit browsers. To support other browsers, you can use a feature detection library like this one:

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

Copy after login

With this library, you can use the following code:

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

Copy after login

The above is the detailed content of How Can I Re-trigger WebKit CSS Animations Using JavaScript?. For more information, please follow other related articles on the PHP Chinese website!