How to transition to & fro pages when I have set my Navigator's Transition property to 'None'

How-to Discussions
1

Hello everyone:)
I want to have other transitions to & fro pages apart from the default sliding one. I already set the Navigation’s transition to ‘None’ but then the pages appear to be stacked on top of each other.
Below is my repo:

<JavaScript>

	var Observable=require("FuseJS/Observable");  

	function goToNext(arg) {
		router.push("noticespg");
	}

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




	var noticesvar = Observable(
		{title: "2017 Fall Semester Dormitory Application", author: "Dormitory", notidate: "2017/08/09", notitime: "11:59 a.m", },
		{title: "2017 Summer Semester Class Enrollment Schedule", author: "Academics Office", notidate: "2017/10/09", notitime: "08:56 a.m"},
		{title: "2018 1st Semester Foreign Students Application", author: "Admissions Office", notidate: "2017/12/10", notitime: "09:30 a.m"} 
		);

	var title= Observable(); 
	var author=Observable();
	var notidate=Observable(); 
	var notitime=Observable();

	module.exports={
		noticesvar: noticesvar, 
		title: title,
		author: author,
		notidate: notidate,
		notitime: notitime,
		goBack: goBack,
		goToNext: goToNext
	}

</JavaScript>


<Page ux:Class="LoginPage">
<Router ux:Dependency="router" />


	<Panel > 
		<Rectangle Height="50" Width="100" Fill="#ccc">
			<Stroke Width="1" Brush="#18f"/>
			<Text Alignment="Center" TextColor="#fff" FontSize="20">Go to page</Text>
		</Rectangle>
		<Clicked>
			<Callback Handler="{goToNext}" />
		</Clicked>
	</Panel>
</Page>


<!-- Notices Page -->
<Page ux:Class="Notices">
<Router ux:Dependency="router" />


	<!-- My Classes -->

	<!-- A Selectable -->
	<Rectangle ux:Class="SelecRec" Height="100" Width="350" Padding="10,10" Fill="#ccc">
		<Selectable Value="{title}" />
		<Text />
		<WhileHovering/>
		<Tapped>
			<ToggleSelection/>
		</Tapped>
	</Rectangle>

	<!-- A divider -->
	<Rectangle ux:Class="Divider" Width="348" Fill="#fff" Height="0.5"/>

	<!-- For title text -->
	<Text ux:Class="TT" FontSize="16" TextColor="#752822" /> 

	<!-- For other text -->
	<Text ux:Class="OT" FontSize="13" TextColor="#752822" /> 

	<Panel>
		<DockPanel>
			<ScrollView Margin="10" Dock="Top"> 
				<StackPanel>
					<Selection Value="{title}" />
					<Each Items="{noticesvar}">
						<SelecRec>
							<DockPanel>	 

								<!-- <Image Dock="Right" File="Arrow.png" Height="20" Width="30" /> -->

								<TT Value="{title}" Dock="Top" TextWrapping="Wrap"/>

								<Grid ColumnCount="2">
									<StackPanel Orientation="Horizontal"> 
										<OT>Author: </OT>
										<OT Value="{author}" TextWrapping="Wrap"/>
									</StackPanel>

									<StackPanel Orientation="Vertical" ItemSpacing="1">
										<StackPanel Orientation="Horizontal" ItemSpacing="2">
											<OT>Date:</OT>
											<OT Value="{notidate}" />
										</StackPanel> 

										<StackPanel Orientation="Horizontal" ItemSpacing="2">
											<OT>Time: </OT>
											<OT Value="{notitime}" />
										</StackPanel>
									</StackPanel>
								</Grid>
							</DockPanel>
						</SelecRec>
					<Divider />
				</Each>
			</StackPanel>
		</ScrollView>
	

		<Panel Height="20" Width="100" Clicked="{goBack}" Color="#f00" Dock="Bottom">	 
			<Text>Go to login page</Text>
		</Panel>
	</DockPanel>
</Panel>

Please help, thanks:)

2

As explained here in docs, you need to add the custom transitions that you want to see. In your code, there is none.

Aside from docs, there’s also a great example that shows how to create complex transitions.