Wie animiere ich Box-Shadow mit jQuery: Direkt- oder CSS-Animation?

So animieren Sie Box-Shadow mit jQuery richtig

Das Problem verstehen

Die Box-Shadow-Eigenschaft, die Elementen visuelle Tiefe verleiht, kann Es kann schwierig sein, mit jQuery zu animieren. Der Standardansatz besteht darin, die einzelnen Facetten des Schattens (z. B. Farbe, Versatz, Unschärferadius und Ausbreitungsradius) separat zu ändern. Dies kann jedoch komplex und fehleranfällig sein.

Direkte Lösung

Eine praktische Lösung ist die Verwendung des jQuery-Plugins von Edwin Martin für Schattenanimationen. Es erweitert die animate-Methode nahtlos und ermöglicht es Ihnen, „boxShadow“ als animierte Eigenschaft anzugeben. Jeder Aspekt des Schattens, einschließlich Farbe, Versätze und Radien, wird entsprechend animiert.

<code class="js">$(element).animate({ 
    boxShadow: "0px 0px 5px 3px hsla(100, 70%, 60%, 0.8)"
});</code>

Alternativer Ansatz: CSS-Animationen

Alternativ können Sie CSS-Animationen verwenden, um die Box zu steuern. Schatteneffekt. Dieser Ansatz behält Stilinformationen in Ihren Stylesheets und vermeidet potenzielle Spezifitätsprobleme.

<code class="css">@keyframes shadowPulse {
    0% {
        box-shadow: 0px 0px 10px 0px hsla(0, 0%, 0%, 1);
    }

    100% {
        box-shadow: 0px 0px 5px 0px hsla(0, 0%, 0%, 0);
    }
}

.shadow-pulse {
    animation-name: shadowPulse;
    animation-duration: 1.5s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}</code>

Sobald die CSS-Animation definiert ist, können Sie sie mit JavaScript oder jQuery anwenden. Wenn die Animation beendet ist, kann das Animationend-Ereignis verwendet werden, um nachfolgende Aktionen auszulösen.

element.classList.add('shadow-pulse');
element.addEventListener('animationend', event => {  
    element.classList.remove('shadow-pulse');
    // do something else...
});

$(element).addClass('shadow-pulse');
$(element).on('animationend', function(){    
    $(element).removeClass('shadow-pulse');
    // do something else...
});

Das obige ist der detaillierte Inhalt vonWie animiere ich Box-Shadow mit jQuery: Direkt- oder CSS-Animation?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!