Bagaimana untuk Menghidupkan Box-Shadow dengan jQuery: Animasi Langsung atau CSS?

Cara Menghidupkan Box-Shadow dengan betul dengan jQuery

Memahami Isu

Sifat bayang-kotak, yang menambah kedalaman visual pada elemen, boleh menjadi mencabar untuk menghidupkan dengan jQuery. Pendekatan standard melibatkan pengubahsuaian aspek individu bayang-bayang (seperti warna, mengimbangi, jejari kabur dan jejari sebaran) secara berasingan. Walau bagaimanapun, ini boleh menjadi rumit dan terdedah kepada ralat.

Penyelesaian Langsung

Penyelesaian yang mudah ialah menggunakan pemalam jQuery Edwin Martin untuk animasi bayang-bayang. Ia memanjangkan kaedah animasi dengan lancar, membolehkan anda menentukan "boxShadow" sebagai sifat animasi. Setiap aspek bayang-bayang, termasuk warna, offset dan jejari, akan dianimasikan dengan sewajarnya.

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

Pendekatan Alternatif: Animasi CSS

Sebagai alternatif, pertimbangkan untuk menggunakan animasi CSS untuk mengawal kotak- kesan bayang. Pendekatan ini menyimpan maklumat gaya dalam helaian gaya anda dan mengelakkan isu kekhususan yang berpotensi.

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

Setelah animasi CSS ditakrifkan, anda boleh menggunakannya menggunakan JavaScript atau jQuery. Apabila animasi selesai, acara akhir animasi boleh digunakan untuk mencetuskan tindakan seterusnya.

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

Atas ialah kandungan terperinci Bagaimana untuk Menghidupkan Box-Shadow dengan jQuery: Animasi Langsung atau CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!