Transition¶
By default, navigate to new page will use the default transition and animation, it can be customized by defining
Transition
property in Navigation action.
PS. This only applies to page-to-page navigation (including within modal dialog). It does not apply to opening and closing of modal dialog and does not apply to tab switching in BottomNavigation.
Transition Properties¶
Property | Type | Required |
---|---|---|
Curve | enum |
Optional |
Duration | integer |
Optional |
Name | enum |
Optional |
Curve¶
transition animation curve.
- type:
enum
The value of this property must be equal to one of the known values below.
Curve Known Values¶
Value | Description |
---|---|
Ease |
|
EaseIn |
|
EaseInOut |
|
EaseOut |
|
Linear |
|
Spring |
Duration¶
The length of the transition in seconds.
- type:
integer
Name¶
built-in transitions.
1 2 3 4 5 6 7 8 9 |
|
- type:
enum
The value of this property must be equal to one of the known values below.
Name Known Values¶
Value | Description |
---|---|
None |
|
Curl |
|
CurlUp |
|
CurlDown |
|
Explode |
|
Fade |
|
Flip |
|
FlipRight |
|
FlipLeft |
|
Slide |
|
SlideLeft |
|
SlideRight |
|
SlideTop |
|
SlideBottom |
Examples¶
// Navigation.action (default transition)
{
"PageToOpen" : "/MDKApp/Pages/ListPage.page",
"Type" : "Action.Type.Navigation"
}
// Navigation.action (fade transition)
{
"PageToOpen" : "/MDKApp/Pages/ListPage.page",
"Type" : "Action.Type.Navigation",
"Transition": {
"Curve": "Linear",
"Duration": 2,
"Name": "Fade"
}
}
// Navigation.action (NO transition)
{
"PageToOpen" : "/MDKApp/Pages/ListPage.page",
"Type" : "Action.Type.Navigation",
"Transition": {
"Name": "None"
}
}
¶
// Navigation.action (NO transition)
{
"PageToOpen" : "/MDKApp/Pages/ListPage.page",
"Type" : "Action.Type.Navigation",
"Transition": {
"Name": "None"
}
}