Chrome의 웹 애니메이션에서 JavaScript `animate()` 기능이 중단되는 이유는 무엇입니까?

JS 함수 animate는 웹 애니메이션으로 인해 Chrome에서 중단될 수 있습니다.

이 JavaScript 코드는 다음을 변경하여 "demo"라는 HTML 요소에 애니메이션을 적용하려고 합니다. 위치와 색상입니다. 그러나 Chrome에서는 작동하지 않습니다.

function animate() {
  var div = document.getElementById('demo');
  div.style.left = "200px";
  div.style.color = "red";
}

문제

Chrome에서는 전역 함수 animate()가 새로 재정의되는 문제가 있습니다. 웹 애니메이션에 Element 프로토타입에 대한 방법을 도입했습니다. 이는 이벤트 핸들러 범위 내에서 전역 함수에 더 이상 액세스할 수 없음을 의미합니다.

해결책

이 문제를 해결하려면 다음 옵션을 고려하십시오.

• 함수 이름 바꾸기: 다음과 같이 프로토타입 메서드와의 충돌을 피하기 위해 animate 이름을 바꿉니다. animate__.

function animate__() {
  // ... same code as above ...
}

• JavaScript의 바인드 메서드 사용: 전역 animate 함수를 이벤트 핸들러의 범위에 바인딩합니다.

document.getElementById('demo').onclick = animate.bind(this);

• Element의 기본 animate() 사용 방법: 대상 요소에서 기본 animate() 메서드를 직접 활용합니다.

document.getElementById('demo').animate([
  { left: "200px" },
  { color: "red" }
], 2000);

위 내용은 Chrome의 웹 애니메이션에서 JavaScript `animate()` 기능이 중단되는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!