Search code examples
onsen-ui

How to change slide direction for resetToPage?


I am building one app in which there are stack of multiple pages whenever I want to go to 1st page I am using resetToPage.

navigator.resetToPage("page2.html", { animation: "slide" }):

Default it is taking right to left transition I need exactly revers of this similar to popPage transition.

I there way to achieve it .


Solution

  • You can find some information about this here: http://onsen.io/guide/overview.html#Transitionanimation

    Basically, you can create a new animator and define it as you need. This is the basic example in OnsenUI repository: https://github.com/OnsenUI/OnsenUI/blob/1.3.14/framework/views/simpleSlideTransitionAnimator.js

    As you can see there, two functions are defined: push and pop animations. resetToPage() uses the "push" animation like pushPage() does, not like popPage(). However, if you just want to invert that, you can create a new animator and define its "push" function exactly the same as the previous "pop" function. You have a quick example here:

    http://codepen.io/frankdiox/pen/azQMZE

    If you change the parameters of the transform functions you will get a different behavior, so you can adapt it as you want. Hope it helps!