soso-tip
soso-tip copied to clipboard
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);
`
),