★★★★★
#UI·디자인 · claude-code
Page Transition 애니메이션
화면 전환 시 부드러운 애니메이션.
#animation#page-transition#go-router
변수 1개 — 여기 채우면 아래 프롬프트에 바로 들어가요
화면 전환 시 부드러운 애니메이션.
go_router 사용:
```dart
GoRoute(
path: '/detail/:id',
pageBuilder: (context, state) {
return CustomTransitionPage(
child: DetailScreen(id: state.pathParameters['id']!),
transitionsBuilder: (context, animation, secondaryAnimation, child) {
return SlideTransition(
position: Tween<Offset>(
begin: Offset(1.0, 0.0),
end: Offset.zero,
).animate(animation),
child: child,
);
},
);
},
)
```
Transition 종류:
- Fade: FadeTransition
- Slide: SlideTransition
- Scale: ScaleTransition
{{TRANSITION_TYPE}} (Fade/Slide 등) 애니메이션으로 화면 전환할까?
쓰는 법 — 위 칸에 본인 값을 채우면 아래 프롬프트에 바로 반영돼요. 복사 버튼을 누르면 채워진 그대로 클립보드에 담기니까, claude-code(또는 본인이 쓰는 AI)에 붙여넣기만 하면 됩니다. 변수가 없으면 그냥 복사해서 쓰세요.