채팅창 껐다 키는 CSS animiation의 흔한 실수: pointer-events

CSS animation으로 채팅창 끄고 키기 구현

처음에 무비앱을 제작하면서 채팅창을 끄고 킬 때 useState를 사용하여 채팅창을 나타나고 사라지게 구현했다.

내가 원했던 방식은 CSS 애니메이션으로 채팅창을 나타나게 했다가 자연스럽게 사라지는 transition 효과를 주고 싶었다.

 

해결 이전 채팅창의 모습

const [isActive, setIsActive] = useState(false);

const handleToggle = () => {
    setIsActive(prev => !prev);
  };
  
  return (
    <>
      {!isActive ? (
        <div onClick={handleToggle} className="live_chat_open">
          ...
        </div>
      ) : (
        <section className={`live-chat-modal ${isActive ? "on" : ""}`}>
          <header>
            <h4>실시간 채팅</h4>
            <div
              className={`close ${isActive ? "" : "off"}`}
              onClick={handleToggle}
            >
             ...
            </div>
          </header>
         ...
        </section>
      )}
    </>
  );

하지만 채팅창을 띄울 때에는 CSS가 반영되었지만 닫을 때에는 반영되지 않았다. 이에 대한 해결방법은 같은 유데미X스나이퍼팩토리 10주 리액트 캠프를 공부하는 동기분에게 답을 얻을 수 있었다.

 

문제점

문제점은 바로 useState의 상태값을 컴포넌트 자체에 영향을 주었기 때문에 애니메이션이 적용되지 않은 것이었다.

 

해결 이전 채팅창의 개발자 도구

콘솔 창에서 확인해보면, live-chat-modal이라는 컴포넌트 자체가 isActive라는 상태값에 의하여 없어졌다가 나타난다.

하지만 이렇게 element 자체가 사라지고 나타나는 사이의 동작에는 transition이라는 애니메이션으로 영향을 줄 수가 없다.

element가 존재한 상태에서 opacity를 조절하여 사라지고 나타나게 하는 것은 어디까지나 element가 존재하기 때문에 영향을 줄 수 있는 것이다.

 

해결 이후

return (
	// isActive를 컴포넌트 자체가 아닌 class에만 부여하였다!
	
	...
      <section className={`live-chat-modal ${isActive ? "on" : "off"}`}>
        <header>
          <h4>실시간 채팅</h4>
          <div
            className={`close ${isActive ? "on" : "off"}`}
            onClick={handleToggle}
          >
            ...
          </div>
        </header>
        ...
       </section>

)

• 이를 해결하기 위해서 isActive를 컴포넌트 자체에 조건문을 걸어주는 것이 아니라 className에만 조건문을 걸어줌으로써 element는 그대로 유지하면서 opacity를 조절하는 방식으로 해결을 하였다.

 

pointer-events로 이벤트 제어하기

.live-chat-modal {
  ...
  transition: all 1s;
  opacity: 0;
  pointer-events: none;

  &.on {
    animation: fadeIn 0.7s;
    opacity: 1;
    pointer-events: visible;
  }
  
  ...

  &.off {
    opacity: 0;
    animation: fadeIn 0.7s;
    pointer-events: none;
  }
}

• CSS에서는 pointer-events라는 속성을 사용하였다. 
• 해당 속성을 사용하여 isActive가 있으면 마우스 이벤트를 허용하고 isActive가 false이면 마우스 이벤트를 허용하지 않음으로써 마우스 이벤트를 제어하면서 동시에 animation을 적용하여 자연스럽게 나타나고 사라지게 한다.

---

• pointer-events란 무엇인가?
• 강제로 대상의 마우스 이벤트를 제어할 수 있는 속성이다.

none: 요소가 포인터 이벤트의 대상이 되지 않도록 설정한다. 해당 요소의
auto: 요소가 pointer-events 속성을 지정하지 않은 것처럼 행동한다.
visible: 마우스 이벤트가 허용되며, 마우스 커서가 해당 요소 위에 위치할 때 클릭 및 다른 마우스 동작을 수행할 수 있게 한다.

최종 결과물

수정 후 채팅창 애니메이션

 

출처 및 참고자료

1. pointer-events의 visible에 대한 설명, chat.openai.com

2. [CSS] CSS 이벤트 제어, pointer-events, https://velog.io/@godud2604/CSS-CSS-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EC%A0%9C%EC%96%B4-pointer-events