AMF has 6 CSS-Based transition effects for pages transition. By default, the framework applies the right to left slide transition.

Transitions:

• Slide
• SlideUp
• SlideDown
• Pop
• Fade
• Flip*

*Not run correctly on Android
If you want to use animation from the left to the right, use DataDirection= »Reverse » property on a Link.

Code:

    <mob:MobilePage ID="mbPage1" runat="server">
        <Header>
            <h1>Transition Page</h1>
        </Header>
        <Content>
            <p>Welcome, in your first mobile page generated with asp.net mobile framework.</p>
            <p>
            <mob:LinkButton runat="server" Text="Slide transition" Url="#mbPage2" DataTransition="Slide"/>
            <mob:LinkButton runat="server" Text="SlideUp transition" Url="#mbPage2" DataTransition="SlideUp"/>
            <mob:LinkButton runat="server" Text="SlideDown transition" Url="#mbPage2" DataTransition="SlideDown"/>
            <mob:LinkButton runat="server" Text="Pop transition" Url="#mbPage2" DataTransition="Pop"/>
            <mob:LinkButton runat="server" Text="Fade transition" Url="#mbPage2" DataTransition="Fade"/>
            <mob:LinkButton runat="server" Text="Flip transition" Url="#mbPage2" DataTransition="Flip"/>
            </p>
        </Content>
        <Footer>
            <h1>Footer</h1>
        </Footer>
    </mob:MobilePage>

    <mob:MobilePage ID="mbPage2" runat="server">
        <Header>
            <h1>Page 2</h1>
        </Header>
        <Content>
            <p>Hello from the page 2</p>
            <p>Go back to the first:<mob:LinkButton ID="LinkButton1" runat="server" Text="Back" Url="#mbPage1" DataDirection="Reverse" DataTransition="Slide"/></p>
        </Content>
        <Footer>
            <h1>Footer</h1>
        </Footer>
    </mob:MobilePage>

Result: