마우스 종료 시 CSS3 호버 애니메이션이 조기에 중지되는 것을 어떻게 방지할 수 있습니까?

마우스 종료 시 :hover에 의해 트리거되는 CSS3 애니메이션 보존

요소의 :hover 상태에서 CSS3 애니메이션을 사용할 때 마우스 커서가 요소를 떠날 때 애니메이션이 갑자기 종료되는 문제. 마우스 유무에 관계없이 애니메이션이 자연스러운 지속 시간을 완료하도록 하려면 이 동작은 바람직하지 않을 수 있습니다.

해결책: JavaScript 통합

안타깝게도 표준화된 CSS 솔루션은 없습니다. 이 요구 사항에 대해. 이러한 제한을 극복하기 위해 다음과 같이 약간의 JavaScript를 통합할 수 있습니다.

1. 애니메이션 클래스 할당: 원하는 애니메이션을 포함하는 요소에 애니메이션 클래스를 추가합니다.
2. 애니메이션 종료 이벤트 처리: 다양한 애니메이션에서 지원되는 애니메이션 종료 이벤트에 이벤트 리스너를 연결합니다. 브라우저.
3. 애니메이션 클래스 제거: 이벤트 리스너 내에서 요소에서 애니메이션 클래스를 제거하여 애니메이션 실행이 완료되도록 합니다.
4. 애니메이션 트리거 on hover: hover 핸들러를 수정하여 마우스를 올렸을 때 요소에 애니메이션 클래스를 추가하세요. over.

예:

$(".box").bind("webkitAnimationEnd mozAnimationEnd animationend", function(){
  $(this).removeClass("animated");
})

$(".box").hover(function(){
  $(this).addClass("animated");
})

이 코드는 이벤트 리스너를 애니메이션 종료 이벤트에 연결하고 요소에서 "animated" 클래스를 제거합니다. 그 완성. 또한 요소 위에 마우스를 올리면 동일한 애니메이션 클래스가 추가됩니다.

위 내용은 마우스 종료 시 CSS3 호버 애니메이션이 조기에 중지되는 것을 어떻게 방지할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!