순수 JavaScript로 CSS 애니메이션을 어떻게 트리거할 수 있나요?

JavaScript에서 CSS 애니메이션 트리거

웹 개발에서 CSS 애니메이션은 웹 페이지에 시각적으로 동적인 효과를 제공합니다. 그러나 JavaScript를 사용하여 이러한 애니메이션을 트리거하는 것은 일반적인 문제가 될 수 있습니다. jQuery를 사용하지 않으려는 사람들을 위해 이 가이드는 JavaScript를 통해서만 CSS 애니메이션을 트리거하는 솔루션을 제공합니다.

효과적인 접근 방식 중 하나는 클래스 조작을 활용하는 것입니다. HTML 요소에 클래스를 추가하거나 제거하여 특정 CSS 애니메이션을 트리거할 수 있습니다. JavaScript에서는 HTMLElement 객체의 className 속성을 통해 이를 달성할 수 있습니다.

시연하려면 다음 예를 고려하세요.

function start() {
  document.getElementById('logo').classList.add('animate');
}

이 스크립트에서는 start 함수가 호출됩니다. 로고 요소를 클릭했습니다. 요소에 'animate' 클래스를 추가합니다.

CSS 애니메이션을 대상으로 하려면 'animate' 클래스에 해당하는 CSS 규칙을 만듭니다.

.animate {
  animation: my-animation 2s forwards;
}

이 CSS 규칙에서 'my-animation' 애니메이션은 'animate' 클래스가 있는 모든 요소에 적용됩니다.

또 다른 방법은 HTMLElement 객체의 스타일 속성을 이용하는 것입니다. 이를 통해 요소의 인라인 스타일을 직접 조작할 수 있습니다. 이 접근 방식을 사용하여 애니메이션을 실행하려면:

document.getElementById('logo').style.animation = 'my-animation 2s forwards';

이전과 마찬가지로 CSS에서 'my-animation' 애니메이션을 정의하여 애니메이션 동작을 지정합니다.

마지막으로 스크롤이 포함된 복잡한 애니메이션의 경우 , 스크롤 이벤트 리스너를 사용할 수 있습니다.

window.addEventListener('scroll', () => {
  if (window.scrollY >= 100) {
    document.getElementById('logo').classList.add('animate');
  }
});

이 예에서는 사용자가 100을 지나 아래로 스크롤하면 애니메이션이 시작됩니다. 픽셀. 이 방법을 사용하려면 스크롤 위치에서 트리거되는 키프레임 규칙으로 CSS 애니메이션을 지정해야 합니다.

이러한 기술을 활용하면 이제 순수 JavaScript를 사용하여 CSS 애니메이션을 동적으로 트리거할 수 있으므로 다양한 창작 가능성이 열립니다. 시각적으로 매력적인 웹 애플리케이션입니다.

위 내용은 순수 JavaScript로 CSS 애니메이션을 어떻게 트리거할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!