jQuery と CSS アニメーションを使用して Box-Shadow をアニメーション化する方法

jQuery を使用して Box-Shadow をアニメーション化する方法

jQuery を使用して box-shadow プロパティをアニメーション化するには、次のことができます。シャドウ アニメーション用の jQuery プラグインによって提供される .animate() メソッドを使用します。これは、.animate メソッドを拡張したものです。

Direct Answer

正しい構文は次のとおりです:

$(element).animate({ 
    boxShadow: "0px 0px 5px 3px hsla(100, 70%, 60%, 0.8)"
}) 

このコードは、ボックス シャドウのすべての面 (カラー、X オフセット、Y オフセット、ブラー) をアニメーション化します。 -radius、spread-radius。

代わりに CSS アニメーションを使用

代わりに CSS アニメーションを使用することを選択できます。 jQuery を使用してアニメーションを直接処理します。これにより、予期せぬ事態を具体的に防ぎ、スタイル情報をスタイルシート内に保持することができます。

スタイルシートで定義できる 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>

その後、animationend イベントを使用して、アニメーションの終了を JS コードと同期させることができます。

Vanilla JS:

<code class="js">element.classList.add('shadow-pulse')
element.addEventListener('animationend', event => {  
    element.classList.remove('shadow-pulse')
    // do something else...
})</code>

jQuery:

gt;

<code class="js">$(element).addClass('shadow-pulse')
$(element).on('animationend', function(){    
    $(element).removeClass('shadow-pulse')
    // do something else...
})</code>

以上がjQuery と CSS アニメーションを使用して Box-Shadow をアニメーション化する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。