React(71) 마우스 이벤트로 호버시 애니메이션 넣기

 

 

메뉴 영역에 마우스 호버시 메시지 박스가 나타나는 기능을 만들어 보려고 한다.

 

단, css 호버기능을 사용하지 않고,

MouseEnter / MouseLeave 이벤트를 사용하여 호버 기능을 구현하였고,

Transition / Animation 속성을 이용하여 애니메이션 기능을 구현하였다.

 

자 그럼 만들러 가보자.

 

 

결과화면 미리보기

메뉴 영역에 마우스 오버시 애니메이션과 함께 호버메시지가 등장한다. 

 

스르륵

 

---

 

React(71) 마우스 이벤트로 호버시 이동 애니메이션 넣기

 

처음에 useState 로 호버의 상태를 알려줄 변수를 선언해준다.

const [hover, setHover] = useState<string>('');

 

 

위에서 선언한 변수(hover) 을 가지고 마우스 이벤트를 걸어주자

이때 호버메시지는 변수(hover)의 값을 감지하여 css 클래스를 추가해 주었다.

 
  <div
    onMouseEnter={() => setHover(key)} // 마우스엔터(호버)시 키값이 저장된다
    onMouseLeave={() => setHover('')}  // 마우스리브 시에는 키값이 지워진다
  >
    {hoverMSG[key].title} 	// 호버메시지는 여러종류가 있기때문에 키값을 통해 내용을 가져오자
  </div>
  
  
  <DIV_HoverInfo 
    className={`${hover !== '' ? 'hover' : 'none'}`} // 호버면 hover 클래스를 추가해주자
  >
    {hover === hoverMSG[key].id && ( // 호버 키값과 === 호버메시지의 id 값이 같으면
        <div className="hover-text"> // 호버메시지를 보여주자
          {hoverMSG[key].text} 	     
        </div> 
    )}
  </DIV_HoverInfo>

 

transition 은 top 좌표와 같은 level 에 위치시키고,  .hover 와 같이 동적 클래스 생성을 통해 top  의 위치를 변경해준다.

animation 은 .hover (동적클래스) 안에 선언해주어서 해당 클래스가 생성될 때 동작하게 된다.

const DIV_Hover = styled.div`
  transition: top 1s ease-in; // trasition 으로 top 이동시 자연스럽게 만들어 주자
  top: 20px; 		       // 호버메시지의 원래 위치 

  &.hover { 			// 호버시 추가되는 클래스
    top: 0px; 			// 호버시 top 위치를 조금 위로 움직여준다.
    animation-duration: 3s;  	// 애니메이션 3초동안 실행 
    animation-name: fadeout; 	// 애니메이션 효과는 fade-out
  }
  
  @keyframes fadeout { 		// fade-out시 opacity를 흐릿하다가 선명하기 만들자
    0% {
      opacity: 0; 
    }

    100% {
      opacity: 1;
    }
  }
`;

 

 

 

마우스 이벤트, 애니메이션은 나에게 부족한 부분이었다.

하지만 기능 구현을 하며 많이 찾아보고 원리에 대해 배우게 되어 조금이라도 내것이 된 것 같아 뿌듯하다 :)