마우스를 올리면 애니메이션이 일시 중지되지만 마우스가 떠나면 계속되는 방법

Question

여러 솔루션에 지쳤는데 이것이 제가 얻은 가장 가까운 솔루션입니다. 하지만 그 결과는 여전히 만족스럽지 않습니다. 마우스가 요소를 벗어나면 요소가 원래 회전으로 되돌아가기 때문입니다. 아이디어는 요소 위로 이동하면 마우스가 요소를 벗어나더라도 애니메이션을 트리거한다는 것입니다. 요소 위로 마우스를 가져가면 애니메이션이 적용되어 0도를 유지하며, 마우스가 떠나면 다른 애니메이션이 재생되어 다시 -8도까지 회전합니다.

으아아아 으아아아 으아아아

도움을 주셔서 정말 감사합니다.

마우스가 요소를 벗어나면 원래 회전으로 돌아가는 부드러운 애니메이션이 나타납니다.

Answer 1

순수한 CSS 솔루션(두 번째 애니메이션을 방지해야 함)

JS나 화려한 수업이 필요하지 않습니다. transform 和 transition-duration 바로 그거예요.

HTML부터 시작해 보겠습니다. 이는 여전히 코드이지만 단순화되었습니다.

으아악

이제 주요 부분은 CSS입니다. 기본적으로 카드는 -8도 회전하므로 이를 달성하기 위한 규칙을 추가했습니다:

으아악

만약 . Polaroid悬停在其上，它会旋转回0度。这意味着我们可以使用伪类 :hover:

으아악

마우스를 다른 곳으로 옮기면 .poloid，:hover 규칙이 더 이상 적용되지 않습니다. 즉, 마우스가 사라진 후 0.25초부터 1초 이내에 이전 규칙으로 되돌아갑니다.

해 보세요:

으아악 으아악

두 번째 애니메이션이 멈추는 것을 방지

복구가 지연되는 것을 방지하려면 일부 JS가 필요합니다.

먼저 몇 가지 상수를 선언합니다.

으아악

그런 다음 핸들러를 만듭니다.

으아악

'mouseover'/'mouseleave'에 대한 이벤트 핸들러로 추가하면 완료됩니다.

으아악

해 보세요:

으아악 으아악 으아악