요소를 제거하지 않고 CSS3 애니메이션을 다시 시작하는 방법은 무엇입니까?

CSS3 애니메이션 다시 시작: 요소 제거보다 더 나은 접근 방식

CSS3 애니메이션 작업 시 사용자 상호작용 시 애니메이션을 다시 시작해야 할 필요성이 발생할 수 있습니다. 생기다. 일반적인 시나리오는 남은 시간을 표시하고 완료 후 재설정이 필요한 진행률 표시줄입니다. 애니메이션 요소를 제거하고 다시 삽입하면 애니메이션이 다시 시작될 수 있지만 불필요한 DOM 조작이 필요합니다.

리플로우를 사용한 대체 방법

보다 효율적인 접근 방식은 브라우저를 트리거하는 것입니다. 애니메이션 변경 사항을 적용하려면 리플로우하세요. 이는 다음 JavaScript 함수를 사용하여 달성할 수 있습니다.

이 예에서는 애니메이션 요소(#animated)를 선택하고 해당 애니메이션을 일시적으로 없음으로 설정합니다. 그러면 진행 상황을 재설정하지 않고 애니메이션이 일시 중지됩니다. 다음으로 offsetHeight를 사용하여 강제 리플로우를 수행합니다. 그러면 모든 CSS 스타일이 적용됩니다. 마지막으로 애니메이션 속성을 원래 값으로 다시 설정하여 애니메이션이 초기 상태에서 다시 시작되도록 합니다.

구현 예

다음 HTML 및 CSS 스니펫 , 화면을 가로질러 튀는 진행률 표시줄이 있습니다.

"재설정" 버튼은 Reset_animation() 함수를 호출하여 눈에 띄는 지연이나 DOM 조작 오버헤드 없이 애니메이션을 다시 시작합니다.

결론

브라우저 리플로우를 사용하여 애니메이션 변경 사항을 적용하면 다음과 같은 이점을 얻을 수 있습니다. CSS3 애니메이션을 다시 시작하기 위한 보다 효율적이고 우아한 솔루션입니다. 요소를 제거하고 다시 삽입할 필요가 없으므로 더 원활하고 성능이 뛰어난 사용자 경험을 얻을 수 있습니다.

위 내용은 요소를 제거하지 않고 CSS3 애니메이션을 다시 시작하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!