# 페이지 트랜지션
## **커스텀**
```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(),
],
)
],
),
);
```
다른 탭 페이지로 이동하는 경우에 위와 같은 코드로, 탭 간 전환을 수행할 수 있습니다.
플러터는 다양한 페이지 트랜지션 옵션을 제공하여 앱의 내비게이션 및 화면 전환을 더욱 매끄럽게 만들 수 있습니다. 프로젝트의 요구 사항과 사용자 경험에 따라 적절한 트랜지션을 선택하여 앱 개발에 활용해보세요.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://developer.aliothx.net/start/uiux/ui-ux/page-transition.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.