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.

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"
    }
}

// Navigation.action (NO transition)
{
    "PageToOpen" : "/MDKApp/Pages/ListPage.page",
    "Type" : "Action.Type.Navigation",
    "Transition": {
        "Name": "None"
    }
}

¶