Skip to content

Transition

Navigate to a new page that uses the default transition and animation, which can be customized by defining the Transition property in Navigation action.

This is applicable only for page-to-page navigation, including within modal dialog. It does not apply to opening and closing of modal dialog nor 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.

Value Description
Ease The animation starts slow, speeds up, and then ends slow.
EaseIn The animation sequence starts out slow and speeds up as the end approaches.
EaseInOut The animation starts slow, speeds up, and then slows down again.
EaseOut The animation starts out fast and slows as the end of the sequence approaches.
Linear The animation is performed at a constant speed for the specified duration.
Spring The animation moves to a target point, overshoot a little, then bounce back.

Duration

The length of the transition in seconds.

  • type: integer

Name

Built-in transitions.

  • type: enum

The value of this property must be equal to one of the known values below.

Value Description
None No transition effect
Curl iOS only, same as CurlUp.
CurlUp iOS only
CurlDown iOS only
Explode Android 5.0 and above only
Fade
Flip Same as FlipRight
FlipRight iOS only
FlipLeft iOS only
Slide Same as SlideLeft
SlideLeft
SlideRight
SlideTop
SlideBottom

Examples

{
    "PageToOpen" : "/MDKApp/Pages/ListPage.page",
    "Type" : "Action.Type.Navigation"
}

{
    "PageToOpen" : "/MDKApp/Pages/ListPage.page",
    "Type" : "Action.Type.Navigation",
    "Transition": {
        "Curve": "Linear",
        "Duration": 2,
        "Name": "Fade"
    }
}

{
    "PageToOpen" : "/MDKApp/Pages/ListPage.page",
    "Type" : "Action.Type.Navigation",
    "Transition": {
        "Name": "None"
    }
}