Wie starte ich eine WebKit-CSS-Animation mit JavaScript neu?

So lösen Sie eine WebKit-CSS-Animation über JavaScript erneut aus

Diese Frage befasst sich mit dem Problem des erneuten Auslösens einer CSS-Animation mithilfe von JavaScript. Die bestehende Animationsregel „@-webkit-keyframes shake“ definiert einen Schütteleffekt, doch nachfolgende Versuche, ihn per JavaScript erneut zu aktivieren, erweisen sich als erfolglos.

Die bereitgestellte Lösung nutzt das „animationEnd“-Ereignis, konkret „webkitAnimationEnd“ für WebKit-Browser. Wenn dieses Ereignis ausgelöst wird, zeigt es den Abschluss der Animation an.

Um die Animation erneut auszulösen, wird dem Element ein Ereignis-Listener für das Ereignis „webkitAnimationEnd“ hinzugefügt. Beim Empfang dieses Ereignisses wird die Stileigenschaft „webkitAnimationName“ des Elements gelöscht, wodurch die Animation effektiv zurückgesetzt wird.

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

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

Browserübergreifende Unterstützung:

Für die browserübergreifende Unterstützung kann das Objekt „css3AnimationSupport“ zur Erkennung von CSS verwendet werden Übergangs-, Transformations- und Animationseigenschaften, die von verschiedenen Browsern unterstützt werden.

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

Das obige ist der detaillierte Inhalt vonWie starte ich eine WebKit-CSS-Animation mit JavaScript neu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!