react transition group with lottie

Desc

react-transiton group으로 BottomSheet등을 만들 때 Lottie리소스가 아예 사라졌다가 다시 생기는 등의 이슈가 있을 수 있다. lottie영역에 고정 height를 줄경우 리소스가 아예 사라지지는 않지만, 애니메이션이 유지된 채로 bottom sheet가 동작하지 않는다.

https://github.com/reactjs/react-transition-group/blob/399f26998a5cf2449798a02c755e5808e9b39ddd/src/Transition.js#L373-L375

cloneElement하는 과정에서 lottie리소스를 비동기로 요청하기때문에 영역이 줄어들었다가 늘어나는것처럼 보일 수 있다. bottomSheet을 구현한다면 useSpring 등 다른 라이브러리를 쓰거나 자체 구현하고, lottie는 별도 ref로 애니메이션을 컨트롤하는 것이 좋다.

 css`
    will-change: transform;
    transition: transform 500ms cubic-bezier(0.7, 0, 0.4, 1);
    transform: translate3d(0, 100%, 0);
  `,
  ({ isOpen }: ModalContainerProps) => (
    isOpen && css`
    transform: translate3d(0, 0, 0);
    `
  ),

SoYoung210 / soso-tip

react transition group with lottie #49

Desc