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

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:


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

	function goToNext(arg) {

	function goBack(arg) {

	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();

		noticesvar: noticesvar, 
		title: title,
		author: author,
		notidate: notidate,
		notitime: notitime,
		goBack: goBack,
		goToNext: goToNext


<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>
			<Callback Handler="{goToNext}" />

<!-- 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 />

	<!-- 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" /> 

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

								<!-- <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 Orientation="Vertical" ItemSpacing="1">
										<StackPanel Orientation="Horizontal" ItemSpacing="2">
											<OT Value="{notidate}" />

										<StackPanel Orientation="Horizontal" ItemSpacing="2">
											<OT>Time: </OT>
											<OT Value="{notitime}" />
					<Divider />

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

Please help, thanks:)

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.