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 中国語 Web サイトの他の関連記事を参照してください。