In - Out animation

How-to Discussions
1

How can I create a custom animation in a Navigator element?
I tried something like this but the ExitingAnimation animation don’t work… Only the EnteringAnimation.

How can solve this Navigator transition?

Thanks!

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

	<JavaScript>
		function Next1() {
			router.goto("2");
		}
		
		function Prev2() {
			router.goto("1");
		}

		module.exports = {
			Next1: Next1,
			Prev2: Prev2
		};
	</JavaScript>

	<DockPanel>
    	<StatusBarBackground Dock="Top" Background="#0079B8" />
	    <Navigator DefaultPath="1">
	    	<Page Transition="None" ux:Class="PageAnimation">
	    		<Router ux:Dependency="router" />

	    		<EnteringAnimation>
			        <Move Y="1" RelativeTo="ParentSize" Duration="0.5" Easing="QuadraticInOut" />
			    </EnteringAnimation>
			    <ExitingAnimation>
			    	<Move Y="-1" RelativeTo="ParentSize" Duration="0.5" Easing="QuadraticInOut" />
			    </ExitingAnimation>
	    	</Page>

	        <PageAnimation router="router" ux:Template="1">
			    <StackPanel>
			    	<Panel Background="#FFB54B">
			    		<Text TextAlignment="Center" FontSize="24" Margin="0, 15, 0, 15" Value="1" Alignment="Center" Color="#FFF" />
			    	</Panel>

			    	<Text TextAlignment="Center" FontSize="24" Margin="0,30,0,0" Value="Next">
			    		<Clicked Handler="{Next1}" />
			    	</Text>
			    </StackPanel>
	        </PageAnimation>

	        <PageAnimation router="router" ux:Template="2">
			    <StackPanel>
			    	<Panel Background="#FFB54B">
			    		<Text TextAlignment="Center" FontSize="24" Margin="0, 15, 0, 15" Value="2" Alignment="Center" Color="#FFF" />
			    	</Panel>

			    	<Text TextAlignment="Center" FontSize="24" Margin="0,30,0,0" Value="Prev">
			    		<Clicked Handler="{Prev2}" />
			    	</Text>
			    </StackPanel>
	        </PageAnimation>
	    </Navigator>

	    <BottomBarBackground Dock="Bottom" />
	</DockPanel>
</App>
2

I also try with Transition but don’t work

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

	<JavaScript>
		function Next1() {
			router.goto("2");
		}
		
		function Prev2() {
			router.goto("1");
		}

		module.exports = {
			Next1: Next1,
			Prev2: Prev2
		};
	</JavaScript>

	<DockPanel>
    	<StatusBarBackground Dock="Top" Background="#0079B8" />
	    <Navigator DefaultPath="1">
	    	<Page Transition="None" ux:Class="PageAnimation">
	    		<Router ux:Dependency="router" />

	    		<Transition Direction="ToActive">
			        <Move Y="1" RelativeTo="ParentSize" Duration="1" Easing="QuadraticInOut" />
			    </Transition>
			    <Transition Direction="ToInactive">
			        <Move Y="-1" RelativeTo="ParentSize" Duration="1" Easing="QuadraticInOut" />
			    </Transition>
	    	</Page>

	        <PageAnimation router="router" ux:Template="1">
			    <StackPanel>
			    	<Panel Background="#FFB54B">
			    		<Text TextAlignment="Center" FontSize="24" Margin="0, 15, 0, 15" Value="1" Alignment="Center" Color="#FFF" />
			    	</Panel>

			    	<Text TextAlignment="Center" FontSize="24" Margin="0,30,0,0" Value="Next">
			    		<Clicked Handler="{Next1}" />
			    	</Text>
			    </StackPanel>
	        </PageAnimation>

	        <PageAnimation router="router" ux:Template="2">
			    <StackPanel>
			    	<Panel Background="#FFB54B">
			    		<Text TextAlignment="Center" FontSize="24" Margin="0, 15, 0, 15" Value="2" Alignment="Center" Color="#FFF" />
			    	</Panel>

			    	<Text TextAlignment="Center" FontSize="24" Margin="0,30,0,0" Value="Prev">
			    		<Clicked Handler="{Prev2}" />
			    	</Text>
			    </StackPanel>
	        </PageAnimation>
	    </Navigator>

	    <BottomBarBackground Dock="Bottom" />
	</DockPanel>
</App>
3

Problem solved! Fixed with RemovingAnimation because I use goto!

file
4N6fSRSXpOGp-image-1495808524128.12.39.png1674×374