hover에서 벗어날 때 transition 바로 종료

문제 상황

이게 뭐람.. 총체적 난국이다.

 

1. 우선 transform 에 transition 이 적용되는건 좋으나 hover 가 끝난 이후에 다시 원래자리에 되돌아가는 것이 transition 되는 것이 내가 원하는 동작이 아니였다.

 

2. transform-origin 은 변경하면 바로 기준점에 적용되지 않고, 이것조차 transition 이 걸려서 기준점이 서서히 변경되었다.

 

 

 

문제 해결 방법

.item 클래스를 가지고 있는 요소에 자바스크립트를 사용하여 transform-origin 을 변경하고 있다. 이때 transition 이 해당 요소에 걸려있기 때문에 자바스크립트에 의해 transform-origin 변경될 때 transition 이 적용되는 것이다.

 

.item {
  width: 20px;
  height: 20px;
  border: 3px solid blue;
  position: absolute;
  transition: 2s linear ;
  transform-origin: 50% 50% ;
}
.item:hover {
  transform: rotate(360deg);
}

 

이런 경우에는 hover 가상 클래스에 transition 을 걸어주면 hover 일 때만 transition 이 발생하기 때문에 문제를 해결할 수 있다.

간단하지만 한참 헤맸다. 😅

 

.item {
  width: 20px;
  height: 20px;
  border: 3px solid blue;
  position: absolute;
  transform-origin: 50% 50% ;
}
.item:hover {
  transform: rotate(360deg);
  transition: 2s linear ;
}