Hello, I am trying to find a basic step-by-step info on how to tweak the default transition to go in another direction when a certain button is clicked. In other words, I have a main page and when the button on the right is clicked, the transition moves the main page to the left and the new page enters from the right. This is the default. However, I also have a button on the left and would like the transition to move in the opposite direction.
I have read and played around with the info in the Navigation and Transition portions of the documentation. I have also tried to pull info from the Transitions example given, but the code for the example is all in one file and has many more complex operations going on that makes it hard for me to parse what is needed for my situation.
Sorry, I am very new to all this! Most of the examples given are to make major changes and I just want to make it go in different directions, left, right, up, and down.
Hi Audrey,
the docs on Transitions and the example are the right place for solving all navigation-transition troubles. This indeed is a quite complex concept, sp you will simply need to sit down and study the docs and example carefully.
The absolutely best place to start though is the intro to custom animations/transitions. If you get a good grasp on that, the docs and that complex example won’t appear as bad as it does right now.
As for what you’re specifically trying to do - the transition to right and then to left - sounds like a default thing in both directions in two cases:
- If you use a
Navigatorand call arouter.push(), the new page transitions in from the right. If you then callrouter.goBack(), the pushed page will transition to the right. - If you use a
PageControl, the page order is implicitly left and right. So as you swipe or navigate from JavaScript, the pages will transition from left to right, as expected.
Hope this helps!
Thanks for your reply!
I already got the navigation to go back to the home page after navigating to a new screen. Now from the home page, I want to assign a button that pushes both the entering (AccountPage) and exiting (HomePage) screen to the to the right instead of the left.
I am using the Navigation, not the Page Control.
So far I have got the HomePage to exit to the right when the correct button is pushed by adding this transition to the navigation in my MainView.ux file…
<App>
<Router ux:Name="router" />
<ClientPanel>
<Navigator DefaultPath="home" ClipToBounds="true">
<HomePage ux:Template="home" router="router">
<Transition To="account">
<Move X="1" RelativeTo="ParentSize" Duration="0.4" Easing="CubicInOut"/>
</Transition>
</HomePage>
<ActivityPage ux:Template="activity" router="router" />
<SandP ux:Template="SandP" router="router" />
<SellPage ux:Template="sell" router="router" />
<AccountPage ux:Template="account" router="router"/>
</Navigator>
</ClientPanel>
</App>
If you could direct me any further it would be greatly appreciated!
I will defiantly study the example file more. Thanks!
I’m not sure why it did not show all the code I pasted in but it does show the part that I mentioned.
Yay, I figured it out!
For anyone else wondering, I added this to the transition after the AccountPage in the same place as above (in Navigation in the MainView.ux.) Sorry that the code is wrapped all funny, but it’s there.
<App>
<Router ux:Name="router" />
<ClientPanel>
<Navigator DefaultPath="home" ClipToBounds="true">
<HomePage ux:Template="home" router="router">
<Transition To="account">
<Move X="1" RelativeTo="ParentSize" Duration="0.4" Easing="CubicInOut"/>
</Transition>
</HomePage>
<ActivityPage ux:Template="activity" router="router" />
<SandP ux:Template="SandP" router="router" />
<SellPage ux:Template="sell" router="router" />
<AccountPage ux:Template="account" router="router">
<Transition>
<Move X="-1" RelativeTo="ParentSize" Duration="0.4" Easing="CubicInOut"/>
</Transition>
</AccountPage>
</Navigator>
</ClientPanel>
</App>
Thanks!
Ok, so for those, like me, that are new to this coding stuff…
You can keep the Navigation portion of you MainView.ux cleaner by putting the Transition info in the individual page’s ux files. For example…
My MainView.ux looks like this…
<App>
<Router ux:Name="router" />
<ClientPanel>
<Navigator DefaultPath="home" ClipToBounds="true">
<HomePage ux:Template="home" router="router"/>
<ActivityPage ux:Template="activity" router="router" />
<SandP ux:Template="SandP" router="router" />
<SellPage ux:Template="sell" router="router" />
<AccountPage ux:Template="account" router="router"/.>
</Navigator>
</ClientPanel>
</App>
The top of my HomePage.ux looks like this…
<Page ux:Class="HomePage" Background="#125F63" >
<Transition To="account">
<Move X="1" RelativeTo="ParentSize" Duration="0.4" Easing="CubicInOut"/>
</Transition>
<Router ux:Dependency="router" />
<JavaScript File="HomePage.js" />
.....
</page>
and…The top of my AccountPage.ux looks like this…
<Page ux:Class="AccountPage" Background="White">
<Transition>
<Move X="-1" RelativeTo="ParentSize" Duration="0.4" Easing="CubicInOut"/>
</Transition>
<Router ux:Dependency="router" />
<JavaScript File="AccountPage.js" />
....
</page>
All other ux content of your .ux files and the content of your .js files stays the same as for the standard navigation.
Long story short: in navigation transitions, there are two sides involved - the page you transition from, and the page you transition to.
And if you want to customise the transitions for specific targets, you have to think of them in pairs and add definitions for all non-standard directions, on both from and to pages.
And, Audrey - if you add custom transitions to your pages, you should also set Transition="None" on them, so that the transitions don’t get mixed together with the default ones.
Thanks so much!
A couple more notes for those new to these concepts… Note that the Move value in the HomePage.ux is X=“1” which is the opposite of the the value given in the AccountPage.ux which is X="-1" Thus, the two sides referred to above.
Another note, if needed, the X refers the X and Y on a X,Y axis. The X representing horizontal movement, left to right, and the Y representing vertical movement, up and down. (See that graphing in algebra was helpful.) So, if you want your page to move up, or down off the screen just replace the X with a Y.
I know this is terribly basic for most the people here, but for those without this type of foundational info and examples, it can cause confusion.