如何使用 jQuery 製作 Box-Shadow 動畫：直接動畫或 CSS 動畫？

如何使用jQuery 正確設定Box-Shadow 動畫

理解問題

box-shadow 屬性可以增加元素的視覺深度，可以使用jQuery 製作動畫具有挑戰性。標準方法涉及分別修改陰影的各個方面（例如顏色、偏移、模糊半徑和擴散半徑）。然而，這可能很複雜且容易出錯。

直接解決方案

一個方便的解決方案是利用 Edwin Martin 的 jQuery 插件來實現陰影動畫。它無縫地擴展了 animate 方法，讓您可以指定「boxShadow」作為動畫屬性。陰影的每個方面，包括顏色、偏移和半徑，都將進行相應的動畫處理。

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

替代方法：CSS 動畫

或者，考慮使用 CSS 動畫來控制盒子 -陰影效果。這種方法將樣式資訊保留在樣式表中，並避免潛在的特異性問題。

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

定義 CSS 動畫後，您可以使用 JavaScript 或 jQuery 應用它。當動畫結束時，可以使用animationend事件來觸發後續動作。

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

以上是如何使用 jQuery 製作 Box-Shadow 動畫：直接動畫或 CSS 動畫？的詳細內容。更多資訊請關注PHP中文網其他相關文章！