Comment redémarrer une animation CSS WebKit à l'aide de JavaScript ?

Comment relancer une animation CSS WebKit via JavaScript

Cette question aborde le problème du redéclenchement d'une animation CSS à l'aide de JavaScript. La règle d'animation existante "@-webkit-keyframes shake" définit un effet de tremblement, mais les tentatives ultérieures pour l'activer à nouveau via JavaScript s'avèrent infructueuses.

La solution fournie exploite l'événement "animationEnd", en particulier "webkitAnimationEnd" pour Navigateurs WebKit. Lorsque cet événement est déclenché, il indique la fin de l'animation.

Pour relancer l'animation, un écouteur d'événement est ajouté à l'élément pour l'événement "webkitAnimationEnd". À la réception de cet événement, la propriété de style "webkitAnimationName" de l'élément est effacée, réinitialisant ainsi l'animation.

Exemple (Plain Vanilla 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 prevent default action here.
};

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

Prise en charge de plusieurs navigateurs :

Pour la prise en charge de plusieurs navigateurs, l'objet "css3AnimationSupport" peut être utilisé pour détecter CSS propriétés de transition, de transformation et d'animation prises en charge par différents navigateurs.

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!