> For the complete documentation index, see [llms.txt](https://developer.aliothx.net/start/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developer.aliothx.net/start/uiux/ui-ux/page-transition.md).
# 페이지 트랜지션
## **커스텀**
```dart
context.router.navigate(CustomTransitionRoute());
```
앱에 고유한 전환 효과를 적용하려는 경우 사용되며, 애니메이션 및 페이지 이동 효과를 완전히 제어할 수 있습니다.
## **페이드 인**
```dart
context.router.navigate(FadeInRoute());
```
새로운 페이지가 서서히 나타나는 효과를 제공하며, 페이지가 부드럽게 표시되는 것을 선호하는 경우에 적합합니다.
## **효과 미적용**
```dart
context.router.navigate(NoTransitionRoute());
```
특별한 효과 없이 페이지를 빠르게 전환하는 데 사용됩니다. 페이지가 갑자기 교체되는 것을 원하는 경우에 유용합니다.
## **아래에서 위로 슬라이드**
```dart
context.router.navigate(SlideBottomRoute());
```
새로운 페이지가 아래에서 위로 올라오는 효과를 제공합니다. 사용자에게 페이지가 위로 슬라이드 되는 느낌을 줍니다.
## **왼쪽으로 슬라이드 with fade**
```dart
context.router.navigate(SlideLeftWithFadeRoute());
```
페이지가 왼쪽에서 오른쪽으로 슬라이드 되면서 동시에 페이드 아웃 효과가 적용됩니다.
## **왼쪽으로 슬라이드**
```dart
context.router.navigate(SlideLeftRoute());
```
페이지가 왼쪽에서 오른쪽으로 슬라이드 되는 효과를 제공합니다.
## **오른쪽으로 슬라이드 with fade**
```dart
context.router.navigate(SlideRightWithFadeRoute();
```
페이지가 오른쪽에서 왼쪽으로 슬라이드 되면서 동시에 페이드 아웃 효과가 적용됩니다.
## **오른쪽으로 슬라이드**
```dart
context.router.navigate(SlideRightRoute());
```
페이지가 오른쪽에서 왼쪽으로 슬라이드 되는 효과를 제공합니다.
## **위에서 아래로 슬라이드**
```dart
context.router.navigate(SlideTopRoute());
```
새로운 페이지가 위에서 아래로 슬라이드 되는 효과를 제공합니다.
## **줌 인**
```dart
context.router.navigate(SlideTopRoute());
```
페이지가 서서히 확대되는 효과를 제공합니다. 페이지가 확대되는 것을 시각적으로 보여주며 사용자의 주의를 끕니다.
## **다른 탭 페이지로 이동**
```dart
context.navigateTo(
MainScreenRoute(
children: [
CommonTab(
children: [
CommonScreenRoute(),
NavigateRoute(),
],
)
],
),
);
```
다른 탭 페이지로 이동하는 경우에 위와 같은 코드로, 탭 간 전환을 수행할 수 있습니다.
플러터는 다양한 페이지 트랜지션 옵션을 제공하여 앱의 내비게이션 및 화면 전환을 더욱 매끄럽게 만들 수 있습니다. 프로젝트의 요구 사항과 사용자 경험에 따라 적절한 트랜지션을 선택하여 앱 개발에 활용해보세요.