핵심 개념
퇴장 애니메이션
exit: 토큰으로 컴포넌트가 사라질 때의 모션을 정해요.
exit: 토큰은 React가 컴포넌트를 없앨 때 어디로 움직이며 사라질지 정해요. 퇴장 애니메이션이 끝날 때까지 Reanimated가 뷰를 화면에 남겨 둬요.
1{visible && (2 <Strx.View animate="fade-in exit:opacity-0 exit:translate-y-12">3 <Strx.Text>토스트 메시지</Strx.Text>4 </Strx.View>5)}움직일 수 있는 값
퇴장 애니메이션은 Reanimated의 exiting 애니메이션으로, 아래 네 가지 값을 움직여요.
| 토큰 | 이렇게 사라져요 |
|---|---|
exit:opacity-0 | 완전히 투명해져요 ( opacity-* 값은 무엇이든 쓸 수 있어요) |
exit:translate-x-24, exit:-translate-x-24 | 오른쪽이나 왼쪽으로 24pt |
exit:translate-y-24, exit:-translate-y-24 | 아래나 위로 24pt |
exit:scale-90 | 작아져요 ( exit:scale-110이면 커져요) |
퇴장은 기본 모습(opacity: 1, 이동 없음, scale: 1)에서 시작해서 적어 둔 값만 움직여요. 적지 않은 값은 그대로예요. exit:rotate-*나 exit:w-* 같은 유틸리티도 토큰으로는 쓸 수 있지만, 퇴장할 때는 움직이지 않아요.
퇴장 타이밍
퇴장은 같은 쉼표 그룹의 타이밍 토큰을 따라요. 타이밍 토큰이 없으면 300ms 동안 ease로 움직여요. 프리셋 기본값이나 Provider의 지속 시간은 퇴장에 적용되지 않아요.
// 그룹 전체에 적용돼요: 등장과 퇴장 모두 180ms, ease-in
<Strx.View animate="fade-in exit:opacity-0 exit:scale-95 duration-180 ease-in" />등장과 퇴장의 타이밍을 따로 주고 싶다면 퇴장을 다른 그룹으로 나눠 주세요.
<Strx.View animate="fade-in from:translate-y-12 duration-400, exit:opacity-0 duration-150 ease-in" />delay-*를 쓰면 퇴장도 잠시 기다렸다가 시작해요. 스프링은 퇴장에 적용되지 않아서, spring을 쓰면 ease로 움직여요.
리스트에서 쓰기
exit:를 레이아웃 트랜지션과 함께 쓰면, 항목이 사라진 자리로 나머지 항목들이 부드럽게 채워져요.
1<Strx.LayoutGroup transition="spring">2 {items.map(item => (3 <Strx.View key={item.id} animate="fade-in from:translate-y-12 exit:opacity-0 exit:translate-x-24">4 <Row item={item} />5 </Strx.View>6 ))}7</Strx.LayoutGroup>쓸 수 있는 컴포넌트
모든 STRX 컴포넌트에서 exit:를 쓸 수 있어요. Strx.View, Strx.Text, Strx.Pressable, Strx.Image, Strx.ScrollView, Strx.TextInput, 그리고 createStrxComponent로 만든 컴포넌트까지요.