Whenever a button, timer, script, image, scroll, or other action in your app will send users to a new page or "view" in your app, you have the opportunity to choose how that page will transition into view.
By default, pages just appear or "flash" into view, but it's a good practice to use animated transitions instead, as these help to create the mobile app experience smartphone and tablet users are accustomed to.
Additionally, using a transition can help mask short loading times if the page that's loading in is particularly data-heavy.
The first important distinction to understand is that transitions in Aquro are actually attached to the actions or scripts that lead to a page being loaded, and not to the pages themselves.
There are technical reasons for this in the platform, but from a developer's perspective this also gives you more control, and allows you to use different transitions when reaching the same page via different actions. For example, you can help create a feeling of linear navigation by swiping a page in from the left or from the right depending on how a user reaches it.
Page transitions are already in Aquro as Visual Coding blocks, so the easiest way to implement a transition is to simply start a Visual Coding event that includes the appropriate block.
Let's say that in the example below that I want to be able to press this pink button on the first page of my app, and then execute a transition that slides in "Page 2".
To begin, we'd select the button UI component in our app, and then press the Visual Coding button next to its "click" event:
Once, the Visual Coding panel loads up, I'll expand the "Nav" coding block folder, then drag in a "Nav.Go.Slide.Left" block:
I'll then click the 'Start' block, and then click my new "Nav.Go.Slide.Left" block to connect the two, which will bring up the configuration window for the Nav.Go.Slide.Left block. From here, I'll drag the "Page2" page that I want to load into the "Page" property in the configuration window:
Now you can click "OK" to close the configuration window, and "OK" once more to close the Visual Coding panel and return to the Page Designer, where we'll finally click "Save" to save our changes:
That's it!
