JavaScript 변수를 사용하여 WebKit 키프레임 값을 동적으로 설정하려면 어떻게 해야 합니까?

JavaScript를 사용하여 변수로 Webkit 키프레임 값 설정

JavaScript에서 생성된 무작위 값을 활용하려고 할 때 일반적인 문제에 직면합니다. CSS 애니메이션. JavaScript 변수는 CSS 키프레임에 직접 삽입할 수 없습니다.

대신 JavaScript를 통해 CSS 규칙을 동적으로 생성하고 CSSOM(CSS 객체 모델)에 삽입해야 합니다.

동적 키프레임 생성

키프레임을 생성하고 조작하려면 다음 단계를 따르세요. 동적으로:

1. window.document.createElement() 메서드를 사용하여 원하는 키프레임 애니메이션 개체를 만듭니다. 이 객체는 키프레임 정의를 위한 컨테이너 역할을 합니다.
2. keyframes.insertRule() 메서드를 사용하여 실제 키프레임을 정의합니다. 이 메서드는 키프레임 비율과 해당 비율에 대한 CSS 규칙이라는 두 가지 매개변수를 사용합니다.
3. sheet.insertRule() 메서드를 사용하여 새로 생성된 키프레임 애니메이션을 CSSOM에 삽입합니다.

예

다음은 기존 키프레임을 동적으로 생성하고 덮어쓰는 예입니다. 임의 회전 값이 있는 애니메이션:

function createRandomRotation(dogValue) {
  // Create the keyframe animation object
  let rotateAnimation = window.document.createElement('style');

  // Define the actual keyframes
  rotateAnimation.innerHTML = `
    @-webkit-keyframes rotate {
      0% {-webkit-transform: rotate(-${dogValue});}
      100% {-webkit-transform: rotate(${dogValue});}
    }

    #dog {
      -webkit-animation: rotate 5s infinite alternate ease-in-out;
    }
  `;

  // Insert the keyframe animation into the CSSOM
  window.document.head.appendChild(rotateAnimation);
}

사용

이 기능을 사용하면 회전 키프레임을 임의 값으로 지속적으로 업데이트할 수 있습니다. 예를 들어 클릭 이벤트를 트리거하여 새로운 임의 각도를 생성하고 그에 따라 키프레임을 업데이트하는 버튼이 있을 수 있습니다.

dogValue를 무작위로 생성된 각도 값으로 바꾸는 것을 잊지 마세요.

위 내용은 JavaScript 변수를 사용하여 WebKit 키프레임 값을 동적으로 설정하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!