jQuery를 사용하여 Box-Shadow에 애니메이션을 적용하는 방법: 직접 애니메이션 또는 CSS 애니메이션?

jQuery를 사용하여 Box-Shadow를 올바르게 애니메이션화하는 방법

문제 이해

요소에 시각적 깊이를 추가하는 box-shadow 속성은 다음을 수행할 수 있습니다. jQuery로 애니메이션을 만드는 것이 어렵습니다. 표준 접근 방식에는 그림자의 개별 측면(예: 색상, 오프셋, 흐림 반경, 확산 반경)을 개별적으로 수정하는 작업이 포함됩니다. 그러나 이는 복잡하고 오류가 발생하기 쉬울 수 있습니다.

직접 솔루션

편리한 솔루션은 그림자 애니메이션에 Edwin Martin의 jQuery 플러그인을 활용하는 것입니다. 애니메이션 메서드를 원활하게 확장하여 "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 중국어 웹사이트의 기타 관련 기사를 참조하세요!