OnsenUI | Working With Page Transitions

Written by on April 9, 2015

OnsenUI | Working With Page Transitions

This piece of code can be used to trigger page transition process:

app.navi.pushPage("view.html");

Take a look at app.navi, it’s a value we gave to ons-navigator directive var attribute.

What if we want to go back and we want to remove a current page from navigation history? We can’t use pushPage function, it will just add a current page to navigation stack. Instead we need to use another function called popPage:

app.navi.popPage();

This function will remove an active page from navigation history and return an application to previously active page.

Animate page transitions

Two different solutions are available to us.

All global navigation changes needs to be done on ons-navigator directive. In this case we need to introduce new attribute called animation:

<ons-navigator animation="slide" var="app.navi">

On the other hand, if we want to animate only certain page transitions we can do it using previously described pushPage function:

app.navi.pushPage("view.html", { animation: "lift"});

What if we have set a global navigation animation and we want to turn it off in some specific cases? This is how you can turn it off:

app.navi.pushPage("view.html", { animation: "none"});

Back button animation will be automatically provided depending on the animation used for an initial page transition. For example, if pop was used during a transition to page 2, reverse pop will be used automatically when we trigger popPage() function (back button functionality).

Who Am I?

Between working as a senior Java developer in one of the largest insurance companies in the world and traveling, in my free time, I work as a professional mobile development adviser. I'm also a major jQuery Mobile supporter back at StackOverflow and a forum moderator at the official Ionic Framework forum.



Categories

1 thought on “OnsenUI | Working With Page Transitions”

  1. Hi,

    I’ve been wondering how to return to the first page successfully. I had used app.navi.resetToPage(‘index.html’) where index.html is the actual file name. It did return to the first page, but the display was messed up. All pages are displayed in one page.

    I’ve been pulling my hair out this weekend because of this issue -,-

Leave a Reply