jQuery 및 CSS 애니메이션으로 Box-Shadow에 애니메이션을 적용하는 방법은 무엇입니까?

jQuery로 Box-Shadow에 애니메이션을 적용하는 방법

jQuery로 box-shadow 속성에 애니메이션을 적용하려면 다음을 수행하세요. 그림자 애니메이션을 위해 jQuery 플러그인에서 제공하는 .animate() 메소드를 사용하세요. 이 메소드는 .animate 메소드를 확장합니다.

직접 답변

올바른 구문은 다음과 같습니다:

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

이 코드는 색상, x 및 y 오프셋, 흐림 등 상자 그림자의 모든 측면에 애니메이션을 적용합니다. -반경 및 확산 반경.

대신 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:< ;/h4>

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

jQuery:

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

위 내용은 jQuery 및 CSS 애니메이션으로 Box-Shadow에 애니메이션을 적용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!