Transition not working while goBack

General
1

Hi guys, I am using Navigator with Custom Transition. router.push() working with Custom Transition but when navigate back, transition is not showing. A page is directly hiding. I am using below code:

<App>
    <Router ux:Name="router" />
    <Navigator DefaultPath="first" Transition="None" >
        <FirstPage ux:Template="first" router="router">
             <Transition To="second">
             </Transition>
        </FirstPage>

        <SecondPage ux:Template="second" router="router">
            <Transition From="first">
                 <Move Y="1.0" Duration="0.5" RelativeTo="ParentSize" Easing="SinusoidalInOut" />
             </Transition>
             <Transition To="third">
             </Transition>
        </SecondPage>

        <ThirdPage ux:Template="third" router="router" />
            <Transition>
                 <Move Y="1.0" Duration="0.5" RelativeTo="ParentSize" Easing="SinusoidalInOut" />
             </Transition>
    </Navigator>
</App>

I have created sample project for that. Please check this.

2

Alright, so the main problem you have there is around here:

        <ThirdPage ux:Template="third" router="router" />
            <Transition>
                 <Move Y="1.0" Duration="0.5" RelativeTo="ParentSize" Easing="SinusoidalInOut" />
             </Transition>

As you can see, the ThirdPage tag is closed on the same line, so the following Transition does not belong to it. Fixing that will go a long way.

When working with custom transitions, it’s important to describe all possible directions that your pages are allowed to travel. Say, if it was possible to go directly from FirstPage to ThirdPage, you would want to describe that as well. For a more sophisticated example on transitions, see this.

And here’s your fixed MainView.ux:

<App>
	<Router ux:Name="router" />
	<Navigator DefaultPath="first" Transition="None" >
		<FirstPage ux:Template="first" router="router">
			<!-- describes what FirstPage does when we navigate from it to SecondPage -->
 			<Transition To="second">
 				<Move Y="-1" Duration="0.5" RelativeTo="ParentSize" Easing="SinusoidalInOut" />
 			</Transition>
		</FirstPage>

		<SecondPage ux:Template="second" router="router">
			<!-- describes what SecondPage does when we navigate to it from FirstPage -->
			<Transition From="first">
 				<Move Y="1" Duration="0.5" RelativeTo="ParentSize" Easing="SinusoidalInOut" />
 			</Transition>
 			<!-- describes what SecondPage does when we navigate from it to ThirdPage -->
 			<Transition To="third">
 				<Move X="-1" Duration="0.5" RelativeTo="ParentSize" Easing="SinusoidalInOut" />
 			</Transition>
		</SecondPage>

		<ThirdPage ux:Template="third" router="router">
			<!-- describes what ThirdPage does when we navigate to it from SecondPage -->
			<Transition From="second">
 				<Move X="1" Duration="0.5" RelativeTo="ParentSize" Easing="SinusoidalInOut" />
 			</Transition>
 		</ThirdPage>
	</Navigator>
</App>
3

Thanks Uldis.
I think Dhvl Golakiya is having the same issue as I’m having.

The issue is the following:
when we navigate to the second page, first page should say where it was, it should not move up as in your example. And second page should cover it by sliding from the bottom.

Also when we go back from the second page to the first page, second page should slide down, and reveal first page. First page should not move at all, it should be static.

It’s like you’re having stack of cards, and put new card on top by sliding it from the bottom but old card stays on it’s place.

I’ve simplified example above to 2 pages only, and when I go back to the first page from the second page, no animation happens. But I’ve defined a transition for the second page for such case and disabled transition for the first page so it says where it was. What should be done differently to get second page animated when we go back to the first page?

<App>
	<Router ux:Name="router" />
	<Navigator DefaultPath="first" Transition="None" >
		<FirstPage ux:Template="first" router="router">
			<!-- describes what FirstPage does when we navigate from it to SecondPage -->
 			<Transition To="second">
 			</Transition>
 			<!-- describes what FirstPage does when we navigate to it from the Second Page -->
 			<Transition From="second">
 			</Transition>
		</FirstPage>

		<SecondPage ux:Template="second" router="router">
			<!-- describes what SecondPage does when we navigate to it from FirstPage -->
			<Transition From="first">
 				<Move Y="1" Duration="0.5" RelativeTo="ParentSize" Easing="SinusoidalInOut" />
 			</Transition>
 			<!-- describes what SecondPage does when we navigate from it to FirstPage -->
 			<Transition To="first">
 				<Move Y="1" Duration="0.5" RelativeTo="ParentSize" Easing="SinusoidalInOut" />
 			</Transition>
		</SecondPage>
	</Navigator>
</App>
4

Ok after reading Slack discussion on this issue and reading code in fuse-examples repo provided above I found solution for 2 page animations. Animation works exactly as required.

I’ve added GotoState="Unchanged" to the <Navigator> and added ZOffset=0 to the first page and ZOffset=1 to the second page.

So when we go to the second page, state is not changing, I wonder if this can cause some problems I’m not aware of.

<App>
	<Router ux:Name="router" />
	<Navigator DefaultPath="first" Transition="None" GotoState="Unchanged">
		<FirstPage ux:Template="first" router="router" Opacity="0.5" ZOffset="0">
			<!-- describes what FirstPage does when we navigate from it to SecondPage -->
 			<Transition To="second">
 			</Transition>
 			<!-- describes what FirstPage does when we navigate to it from the Second Page -->
 			<Transition From="second">

 			</Transition>
		</FirstPage>

		<SecondPage ux:Template="second" router="router" ZOffset="1">
			<!-- describes what SecondPage does when we navigate to it from FirstPage -->
			<Transition From="first">
 				<Move Y="1" Duration="0.5" RelativeTo="ParentSize" Easing="SinusoidalInOut" />
 			</Transition>
 			<!-- describes what SecondPage does when we navigate from it to FirstPage -->
 			<Transition To="first">
 				<Move Y="1" Duration="0.5" RelativeTo="ParentSize" Easing="SinusoidalInOut" />
 			</Transition>
		</SecondPage>
	</Navigator>
</App>
5

@poul: yes, the fact that the first page is immediately brought to front upon going back missed my attention.

Your solution is perfect, and there are no other implications to using GotoState="Unchanged"; in fact, that’s exactly what should be used in this case. Just be aware that this is a setting on the Navigator, so all pages (if there are more than 2) should have their ZOffset set correctly.

6

@Uldis

I have lots of pages and they can be stacked in arbitrary order. So hardcoding ZOffset is not an option. I wonder if there is a way to change stage of the page programmatically or via UX Action. I’ve searched and tried different actions like <BringToFront>, <Toggle> but looks like they do not change the sate of the <Page>

7

You could try something like this on a page:

<Activated When="Immediate">
    <BringToFront />
</Activated>

Let me know if that helps.

8

Thanks for hint Uldis, I’ve tried that, in some cases it helped me to move further but still not able to solve the end goal.

The end result it shown here: https://www.youtube.com/watch?v=NvseD-q3obQ, it was made via <Each>, <AddingAnimation>, <RemovingAnimation> and it works perfectly well and easy to understand and implement. The code is below. So I expected to achieve the same result via <Navigator> but looks like it’s not that easy, as transitions rely on position of the page in the <Navigator> hierarchy, is this page below other page in the list of pages in <Navigator>/<PageControl> or not, and based on that some decisions are made.

However I wanted <Navigator> to behave the same as my example with <Each> I don’t want to care about position of the page inside navigator, is it on top or below, etc. what I want is the same behavior as with <AddingAnimation> and <RemovingAnimation> but with <Transition>. <EnteringAnimation> and <ExitingAnimation> do not allow me to achieve the same effect.

Now I’m thinking on developing my own navigator component with separate service for managing history and stack of pages to implement what I want. I guess it will eat a lot more memory as I’m losing all that reuse/release stuff which is provided by Navigator and alike components.

<Page>
		<Router ux:Dependency="router" />
		<JavaScript>
		var Observable = require('FuseJS/Observable');
		var cards = Observable(
			{name: 0}
		);

		function pushCard() {
			cards.add({name: cards.length});
		}

		function popCard() {
			if (cards.length === 0) {
				return;
			}
			cards.removeAt(cards.length - 1);
		}

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

		module.exports = {
			goNext: goNext,
			cards: cards,
			pushCard: pushCard,
			popCard: popCard
		}
		</JavaScript>

		<Rectangle Layer="Background" Color="#0057ff" />
		<SampleText Y="24" Text="Next" Clicked="{goNext}" />
		<Button Text="pushCard()" Y="54" Clicked="{pushCard}" />
		<Button Text="popCard()" Y="74" Clicked="{popCard}" />
		<Panel Width="200" Height="200" ClipToBounds="true">
			<Rectangle Layer="Background">
				<Stroke Width="1" Color="#bbb" />
			</Rectangle>
			<Each Items="{cards}">
				<Panel Width="100" Height="100%"  Y="{name * 10}" ZOffset="{name}" >
					<Rectangle Layer="Background" CornerRadius="10,10,0,0" Color="#ac3">
						<Stroke Width="1" Color="#555" />
					</Rectangle>
					<ScrollView>
						<DockPanel>
							<ScrollView Height="25" Dock="Top" ClipToBounds="false">
						        <Rectangle Dock="Top" Width="55" Height="6" Color="#00000019" CornerRadius="4" Margin="0,10,0,5">
						            <Scrolled To="Start" Within="-20">
						                <Callback Handler="{popCard}" />
						            </Scrolled>
						        </Rectangle>
						    </ScrollView>
							<StackPanel ItemSpacing="5">
								<Each Count="20" >
									<Text Value="Page {name}" Margin="5,0,0,0"/>
								</Each>
							</StackPanel>
						</DockPanel>
					</ScrollView>

					<AddingAnimation>
			            <Move RelativeTo="Size" Y="1" Duration="0.3" Easing="SinusoidalInOut" />
			        </AddingAnimation>
			        <RemovingAnimation>
			            <Move RelativeTo="Size" Y="1" Duration="0.3" Easing="SinusoidalInOut" />
			        </RemovingAnimation>
				</Panel>
			</Each>
		</Panel>

	</Page>