Comment animer Box-Shadow avec jQuery : animation directe ou CSS ?

Comment animer correctement Box-Shadow avec jQuery

Comprendre le problème

La propriété box-shadow, qui ajoute de la profondeur visuelle aux éléments, peut être difficile à animer avec jQuery. L'approche standard consiste à modifier séparément les facettes individuelles de l'ombre (telles que la couleur, le décalage, le rayon de flou et le rayon de propagation). Cependant, cela peut être complexe et sujet aux erreurs.

Solution directe

Une solution pratique consiste à utiliser le plugin jQuery d'Edwin Martin pour l'animation d'ombres. Il étend de manière transparente la méthode d'animation, vous permettant de spécifier "boxShadow" comme propriété animée. Chaque aspect de l'ombre, y compris la couleur, les décalages et les rayons, sera animé en conséquence.

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

Approche alternative : animations CSS

Vous pouvez également envisager d'utiliser des animations CSS pour contrôler la boîte. effet d'ombre. Cette approche conserve les informations de style dans vos feuilles de style et évite les problèmes de spécificité potentiels.

<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>

Une fois l'animation CSS définie, vous pouvez l'appliquer à l'aide de JavaScript ou de jQuery. Une fois l'animation terminée, l'événement animationend peut être utilisé pour déclencher des actions ultérieures.

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

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!