CSS3 애니메이션 다시 시작: 리플로우가 요소 제거에 대한 최선의 대안입니까?

CSS3 애니메이션 다시 시작: 요소 제거에 대한 향상된 대안

CSS3 애니메이션을 다시 시작할 때 자주 사용되는 흥미로운 기술은 문서의 애니메이션 요소를 제거하고 해당 복제본을 다시 삽입합니다. 이 접근 방식은 효과적이면서도 최적화할 수 있는 기회를 제공합니다.

익명 전문가가 제안한 대로 애니메이션을 다시 시작하는 데 선호되는 방법은 리플로우를 트리거하는 것입니다. 이는 아래에 설명된 것처럼 HTMLElement의 높이에 액세스하여 간단히 수행할 수 있습니다.

function reset_animation() {
  var el = document.getElementById('animated');
  el.style.animation = 'none';
  el.offsetHeight; /* trigger reflow */
  el.style.animation = null; 
}

이 예에서 애니메이션은 처음에 '없음'으로 설정되어 재설정을 트리거합니다. 그 후, 요소의 크기를 계산하고 캐시하는 요소의 offsetHeight에 액세스하여 리플로우가 시작되고 이에 따라 애니메이션 재설정이 적용됩니다. 마지막으로 애니메이션 스타일에 'null' 값을 할당하면 다시 재생할 수 있습니다.

이 리플로우 기반 접근 방식은 간결하고 효율적이며 단순성과 효율성 측면에서 이전 방식을 능가합니다.

위 내용은 CSS3 애니메이션 다시 시작: 리플로우가 요소 제거에 대한 최선의 대안입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!