Skip to content

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
None (NO transition effect)
Curl (same as CurlUp) (iOS only)
CurlUp (iOS only)
CurlDown (iOS only)
Explode (Android Lollipop(21) and up only)
Flip (same as FlipRight)
Slide (same as SlideLeft)
FlipLeft (iOS only)
FlipRight (iOS only)
  • 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"
    }
}