Page transition problem

How-to Discussions
1

Hi.
I have a question regarding page transition.
I have worked my work on rotating-sidebar example from fuse.
What I was trying to do was that making a button to go to a new page.
I tried to use login-transition example to do it, but it was not successful.
Can someone help me with it?? Thank you

2

I didn’t full understand your question but here is a simple example of page navigation using the Navigator Class. However, i advice you create a separate file for each page.

<App>
	<Router ux:Name="router"/>

	<JavaScript>
	  function goNext(){
			router.push('pages');
		}

		function goBack(){
			router.goBack();
		}

		module.exports={
			goNext,
			goBack
		}
	</JavaScript>

	<ClientPanel>
		<Navigator DefaultTemplate="page">
			  <PageOne ux:Template="page" router="router"/>
				<PageTwo ux:Template="pages" router="router"/>
		</Navigator>

		<!-- Page One -->
		<Page ux:Class="PageOne">
			<Router ux:Dependency="router" />
			<StackPanel>
				<Text FontSize="30" Margin="10">Page One</Text>
				<Button Clicked="{goNext}" Alignment="Center" Text="Next Page"/>
			</StackPanel>
		</Page>

		<!-- Page Two -->
		<Page ux:Class="PageTwo">
			<Router ux:Dependency="router" />
			<StackPanel>
				<Text FontSize="30" Margin="10">Page Two</Text>
				<Button Clicked="{goBack}" Alignment="Center" Text="GO Back"/>
			</StackPanel>
		</Page>
	</ClientPanel>
</App>