Do not understand why next/back navigation breaks after few interactions

Bug Reports
1

I’ve added EnteringAnimation and ExitingAnimation and it was enough to break my pages.

How to reproduce:

  • Run the code below
  • Click Next, to go to second page
  • Click Next, to go to third page
  • Click Back to go to second page (nothing happens)
  • Click Back to go to second page again (we go to the first page)
  • Click Next to go to second page (nothing happens, app is dead)
<App>
	<Router ux:Name="router" />

	<!-- Sample Text -->
	<Text ux:Class="SampleText" Width="100%" Color="#fff" TextAlignment="Center" Value="{ReadProperty Text}" FontSize="20" >
    	<string ux:Property="Text" />
	</Text>

	<!-- Card Page -->
	<!-- Custom Page Class with predefined page transitions -->
	<DockPanel ux:Class="CardPage" Alias="test">
		<string ux:Property="Alias" />
	    <EnteringAnimation>
	    	<Move Y="1" RelativeTo="ParentSize" Duration="0.5" />
	    	<DebugAction Message="{ReadProperty Alias} EnteringAnimation" />
    	</EnteringAnimation>
    	<ExitingAnimation>
    		<Move Y="-1" RelativeTo="ParentSize" Duration="0.5" />
    		<DebugAction Message="{ReadProperty Alias} ExitingAnimation" />
    	</ExitingAnimation>
    	
	</DockPanel>

	<!-- ***** -->
	<!-- Pages -->
	<!-- ***** -->

	<!-- First Page -->
	<CardPage ux:Class="FirstPage" Alias="FirstPage">
		<Router ux:Dependency="router" />
		<JavaScript>

		function goNext() {
			router.push("second");
		}

		module.exports = {
			goNext: goNext
		}
		</JavaScript>

		<Rectangle Layer="Background" Color="#0057ff" />
		<SampleText Y="24" Text="Next" Clicked="{goNext}" />

	</CardPage>

	<!-- Second Page -->
	<CardPage ux:Class="SecondPage" Alias="SecondPage">
		<Router ux:Dependency="router" />
		<JavaScript>

		function goNext() {
			router.push("third");
		}

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

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

		<Rectangle Layer="Background" Color="#ff9d2a" />

		<SampleText Y="24" Text="Back" Clicked="{goBack}" />
		<SampleText Y="60" Text="Next" Clicked="{goNext}" />
		
	</CardPage>

	<!-- Third Page -->
	<CardPage ux:Class="ThirdPage" Alias="ThirdPage">
		<Router ux:Dependency="router" />
		<JavaScript>

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

		module.exports = {
			goBack: goBack
		}
		</JavaScript>

		<Rectangle Layer="Background" Color="#000" />
		<SampleText Y="24" Text="Back" Clicked="{goBack}" />
		
	</CardPage>

	<!-- PageView -->
	<Navigator DefaultPath="first" Transition="None">
		<FirstPage ux:Template="first" router="router" />

		<SecondPage ux:Template="second" router="router" />

		<ThirdPage ux:Template="third" router="router" />
	</Navigator>
</App>
2

Hey;

I was unable to reproduce your issue, or i misunderstood what you thought was not working as expected. Could you properly describe what is happening, and what you expect to happen? I am able to navigate through the pages as described fine using the newest version of Fuse, did you remember to update?

3

I’ve created brand new app in FuseTools, and pasted my code above, and tried one more time, same issue.

I’m using Fuse 1.3.2 (build 14697)

Here is the video:

pay attention to the BLACK screen, where I need to click back button 2 times. And then I go to the first screen, not to the second. In the end I’m stuck on the first screen. And can not go anywhere.

4

@poul.kg: I gave this code a try on Fuse 1.4 and it worked for me no problem - as in, it did not “break” as you described it should have.

Perhaps it’s an issue with Fuse 1.3, so please try updating. Another tip that might be helpful though: when you specify Transition="None" on the Navigator, you need to describe all possible animations a page can travel. Specifically, that’s EnteringAnimation, ExitingAnimation and RemovingAnimation too, because a page in a Navigator might be removed instead of just exiting.

Hope this helps!