Skip to content

Instantly share code, notes, and snippets.

@koo6357
Created September 1, 2020 07:14
Show Gist options
  • Save koo6357/f161df8f0a40c4b269ea2fc011a61509 to your computer and use it in GitHub Desktop.
Save koo6357/f161df8f0a40c4b269ea2fc011a61509 to your computer and use it in GitHub Desktop.
[framer-motion]
<AnimatePresence>
    {
        status &&
        <FramerComponent/>
    }
</AnimatePresence>

리액트에서 애니메이션을 컴포넌트가 unmount되는 시점에도 주려면 조금은 까다롭다고 생각된다. unmount시의 애니메이션이 끝나는 onTransitionEnd 이벤트에 unmount 핸들러를 제공하여 처리해왔었다. AnimatePresence를 위와같이 이용하면 unmount시에도 css에서 transition을 사용하듯 쉽게 처리할수 있다. initial props을 사용할수 있으며, true를 사용할경우 컴포넌트가 최초 렌더 시부터 애니메이션을 적용하게 되고 false일경우 최초 렌더에는 사용하지 않는다.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment