마운트/마운트 해제할 때 React 구성 요소를 쉽게 애니메이션화하세요 😅

애니메이션과 관련하여 React 프로그래머로서 제가 가장 간과했던 것 중 하나는 구성 요소를 마운트 및 마운트 해제할 때의 전환입니다. 일반적으로 나는 애니메이션을 넣을 쉽고 편안한 방법을 찾지 못했기 때문에 항상 애니메이션 없이 떠났습니다. 결과는 매우 강제적이며 사용자의 경험은 유동적이지 않고 마법에 의해 사물이 나타나고 사라지는 것입니다.

며칠 전까지만 해도 구성 요소를 마운트 및 마운트 해제할 때 애니메이션을 실행하는 가장 좋고 간단한 방법을 조사하기로 결정했습니다. 가장 간단한 구문을 통해 구성 요소를 마운트 및 마운트 해제할 수 있는 일반 구성 요소를 만드는 것이 가장 좋은 방법이라는 결론에 도달했습니다.

구성 요소의 애니메이션을 관리하고 표시될 때 마운트 및 마운트 해제를 처리하는 구성 요소를 만들기 시작했습니다. 애니메이션은 CSS 키프레임을 사용하여 수행해야 했기 때문에 다음과 같은 간단한 예와 같은 솔루션을 생각해 냈습니다.

이 대신(애니메이션 없이 마운트/마운트 해제):

const MyComponent = () => {
  const [isMounted, setIsMounted] = useState(false);

  ...

  return (
   <>
      {isMounted && (
        <div>
          Hi World!
        </div>
      )}
   </>
)
...

이렇게 합니다(애니메이션과 동일).

import Animated from "react-mount-animation";

const MyComponent = () => {
  const [isMounted, setIsMounted] = useState(false);

  ...

  return (
      <Animated.div //You can use any HTML element here
        show={isMounted}
        mountAnim={` 
            0% {opacity: 0}
            100% {opacity: 1}
        `}
      >
        Hi World!
      </Animated.div>
)
...

공동 작업을 원하는 사람은 누구나 저에게 연락할 수 있으며 기술적인 의견이나 비기술적인 의견은 기꺼이 받을 것입니다. 이 패키지가 말이 되지 않을 수도 있고 그럴 수도 있습니다. 어쨌든 의견을 남겨주시면 감사하겠습니다.

코드를 검사하거나 단순히 테스트하려는 경우 저장소를 참조하여 수행할 수 있습니다: https://github.com/mijim/react-mount-animation

https://www.npmjs.com/package/react-mount-animation

감사합니다. 즐거운 코딩하세요! ⚡️