How To reverse Back Transition?

1

Hello All, I would like some help regarding how to reverse the back animation.

I am working on a RTL app, and i kind of succeeded to make most of the elements rtl, the only thing i can’t figure out how to reverse, is the back animation.

everytime the back animation happenes in the rtl mode, it goes the same direction as forward in the rtl, which causes the animation to work twice in the same direction, and looks weird. i checked a lot in the docs and couldn’t find how to reverse only the back transition, i would really be happy to know how to do this.

Thanks :slight_smile:

2

the nav title actually animates back, its only the page transition itself…

3

+1 good question - I also wonder how to specify transition direction.

4

Hi Boltex, I actually managed to reverse the first transition. i used this:
nav-direction=“back”

but, the problem is that when i use this the page that come afterwards has a “back”, that if you press it it stays on the same animation direction, and it should somehow reverse the back transition… this is what i am looking for…

5

So… did anyone have any success with this ?

6

I doubt you will want to do this since it includes “extending/changing their code”, but you can access their transaction function and change it using the following in your app.js:

$ionicConfigProvider.transitions.views.android = function(enteringEle, leavingEle, direction, shouldAnimate) {
    shouldAnimate = shouldAnimate && (direction == 'forward' || direction == 'back');

    function setStyles(ele, x) {
      var css = {};
      css[ionic.CSS.TRANSITION_DURATION] = d.shouldAnimate ? '' : 0;
      css[ionic.CSS.TRANSFORM] = 'translate3d(' + x + '%,0,0)';
      ionic.DomUtil.cachedStyles(ele, css);
    }

    var d = {
      run: function(step) {
        if (direction == 'forward') {
          setStyles(enteringEle, (1 - step) * 99); // starting at 98% prevents a flicker
          setStyles(leavingEle, step * -100);

        } else if (direction == 'back') {
          setStyles(enteringEle, (1 - step) * -100);
          setStyles(leavingEle, step * 100);

        } else {
          // swap, enter, exit
          setStyles(enteringEle, 0);
          setStyles(leavingEle, 0);
        }
      },
      shouldAnimate: shouldAnimate
    };

    return d;
};

In the direction == ‘back’ content, change it to the same as forward.
I haven’t tested it for rtl but most likely will work.

7

Hii @EffakT, I am trying your method, and i think it works!
So just wanted to say thanks :smile:

8

Just watch out for updates. If they update the transitions function, it will have to be rewritten/modified to work.