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

Re-triggering WebKit CSS Animations Imperatively

When working with WebKit CSS animations, limitations can arise when attempting to re-trigger animations multiple times. This article addresses such scenarios and provides solutions for re-initiating CSS animations via JavaScript without resorting to timeouts or additional animations.

To achieve this, WebKit browsers utilize the "webkitAnimationEnd" event, which is triggered upon completion of the animation cycle. By capitalizing on this event, it becomes possible to reset and re-launch animations programmatically.

Vanilla JavaScript Implementation

In pure JavaScript, the approach involves:

1. Selecting the element to be animated.
2. Adding an event listener to the "webkitAnimationEnd" event.
3. Resetting the animation upon event triggering.

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

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

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

jQuery Implementation

Utilizing jQuery offers a simplified syntax:

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

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

Cross-Browser CSS Support

For cross-browser compatibility, consider utilizing a browser detection library. CSS3 transition tests provide a support object that can aid in identifying the correct event names and animation properties for different browsers.

// Browser detection object
var css3AnimationSupport = (function(){
    var div = document.createElement('div'),
        divStyle = div.style;
    return {
        transform: divStyle.MozTransform  ||
                   divStyle.MsTransform   ||
                   divStyle.WebkitTransform ||
                   divStyle.OTransform    ||
                   divStyle.transform,
        transition: divStyle.MozTransition ||
                    divStyle.MsTransition   ||
                    divStyle.WebkitTransition ||
                    divStyle.OTransition    ||
                    divStyle.transition
    };
}());

By leveraging the appropriate event names and animation properties, this approach enables the re-triggering of CSS animations in a cross-browser compatible manner.

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