replacePageで画面遷移する際のアニメーションの方向を変えたい


Navigator.replacePageでページ移動する際にアニメーションなどを指定できますが毎回右から左になっているので逆からの遷移を表現できません。左から右にする方法はあるのでしょうか？




理解できる範囲で解析しただけなので詳しく説明できませんが、onsenui.jsをカスタマイズしないと左から右は無理のようです。  
SimpleSlideTransitionAnimator()、IOSSlideTransitionAnimator()を直接改造するか、新たに左から右用を追加すれば実現できると思います。

[code]

    // Preset transition animators.
    NavigatorView._transitionAnimatorDict = {
      'default': $onsen.isAndroid() ? new SimpleSlideTransitionAnimator() : new IOSSlideTransitionAnimator(),
      'slide': $onsen.isAndroid() ? new SimpleSlideTransitionAnimator() : new IOSSlideTransitionAnimator(),
      'simpleslide': new SimpleSlideTransitionAnimator(),
      'lift': new LiftTransitionAnimator(),
      'fade': new FadeTransitionAnimator(),
      'none': new NullTransitionAnimator()
    };
    
[/code]

SimpleSlideTransitionAnimator()だけ試してみましたが、translate3D()のX軸の値を左から右に変更したところ、実現できました。  
※11908行にSimpleSlideTransitionAnimatorのfactoryを定義した行があります。  
pushの部分だけ抜粋しますが、enterPageは100%(右)から0(左)に移動するので、-100%(左)に変更すれば0(右)に向かって移動します。  
押し出されるleavePageは0(右)から-45%(左)に移動するので、45%(右)に変更すれば0(左)から右に移動します。

[code]

      push: function(enterPage, leavePage, callback) {
        var mask = this.backgroundMask.remove();
        leavePage.element[0].parentNode.insertBefore(mask[0], leavePage.element[0].nextSibling);
    
        animit.runAll(
    
          animit(mask[0])
            .queue({
              opacity: 0,
              transform: 'translate3d(0, 0, 0)'
            })
            .queue({
              opacity: this.blackMaskOpacity
            }, {
              duration: this.duration,
              timing: this.timing
            })
            .resetStyle()
            .queue(function(done) {
              mask.remove();
              done();
            }),
    
          animit(enterPage.element[0])
            .queue({
              css: {
                transform: 'translate3D(-100%, 0, 0)', //'translate3D(100%, 0, 0)',
              },
              duration: 0
            })
            .queue({
              css: {
                transform: 'translate3D(0, 0, 0)',
              },
              duration: this.duration,
              timing: this.timing
            })
            .resetStyle(),
    
          animit(leavePage.element[0])
            .queue({
              css: {
                transform: 'translate3D(0, 0, 0)'
              },
              duration: 0
            })
            .queue({
              css: {
                transform: 'translate3D(45%, 0px, 0px)' //'translate3D(-45%, 0px, 0px)'
              },
              duration: this.duration,
              timing: this.timing
            })
            .resetStyle()
            .wait(0.2)
            .queue(function(done) {
              callback();
              done();
            })
        );
      },
    
[/code]

**追記**  
citherさんにコメントをいただいたので、onsenui.jsをカスタマイズしないやり方を試してみました。  
SimpleSlideTransitionAnimatorのfactoryをコピー、値を変更して"slideLtoR"というアニメーションとして動作させます。

参考にしたページ  
[pushPage animation for sliding from right to left
#410](https://github.com/OnsenUI/OnsenUI/issues/410)

[code]

    app.factory('SimpleSlideTransitionAnimatorLtoR', ['NavigatorTransitionAnimator', function(NavigatorTransitionAnimator) {
        var SimpleSlideTransitionAnimatorLtoR = NavigatorTransitionAnimator.extend({
            //
            // 省略
            //
        });
        return SimpleSlideTransitionAnimatorLtoR;
    }]);
    app.run(function(NavigatorView, SimpleSlideTransitionAnimatorLtoR) {
        NavigatorView.registerTransitionAnimator("slideLtoR", new SimpleSlideTransitionAnimatorLtoR());
    });
    
[/code]




理解できる範囲で解析しただけなので詳しく説明できませんが、onsenui.jsをカスタマイズしないと左から右は無理のようです。  
SimpleSlideTransitionAnimator()、IOSSlideTransitionAnimator()を直接改造するか、新たに左から右用を追加すれば実現できると思います。

[code]

    // Preset transition animators.
    NavigatorView._transitionAnimatorDict = {
      'default': $onsen.isAndroid() ? new SimpleSlideTransitionAnimator() : new IOSSlideTransitionAnimator(),
      'slide': $onsen.isAndroid() ? new SimpleSlideTransitionAnimator() : new IOSSlideTransitionAnimator(),
      'simpleslide': new SimpleSlideTransitionAnimator(),
      'lift': new LiftTransitionAnimator(),
      'fade': new FadeTransitionAnimator(),
      'none': new NullTransitionAnimator()
    };
    
[/code]

SimpleSlideTransitionAnimator()だけ試してみましたが、translate3D()のX軸の値を左から右に変更したところ、実現できました。  
※11908行にSimpleSlideTransitionAnimatorのfactoryを定義した行があります。  
pushの部分だけ抜粋しますが、enterPageは100%(右)から0(左)に移動するので、-100%(左)に変更すれば0(右)に向かって移動します。  
押し出されるleavePageは0(右)から-45%(左)に移動するので、45%(右)に変更すれば0(左)から右に移動します。

[code]

      push: function(enterPage, leavePage, callback) {
        var mask = this.backgroundMask.remove();
        leavePage.element[0].parentNode.insertBefore(mask[0], leavePage.element[0].nextSibling);
    
        animit.runAll(
    
          animit(mask[0])
            .queue({
              opacity: 0,
              transform: 'translate3d(0, 0, 0)'
            })
            .queue({
              opacity: this.blackMaskOpacity
            }, {
              duration: this.duration,
              timing: this.timing
            })
            .resetStyle()
            .queue(function(done) {
              mask.remove();
              done();
            }),
    
          animit(enterPage.element[0])
            .queue({
              css: {
                transform: 'translate3D(-100%, 0, 0)', //'translate3D(100%, 0, 0)',
              },
              duration: 0
            })
            .queue({
              css: {
                transform: 'translate3D(0, 0, 0)',
              },
              duration: this.duration,
              timing: this.timing
            })
            .resetStyle(),
    
          animit(leavePage.element[0])
            .queue({
              css: {
                transform: 'translate3D(0, 0, 0)'
              },
              duration: 0
            })
            .queue({
              css: {
                transform: 'translate3D(45%, 0px, 0px)' //'translate3D(-45%, 0px, 0px)'
              },
              duration: this.duration,
              timing: this.timing
            })
            .resetStyle()
            .wait(0.2)
            .queue(function(done) {
              callback();
              done();
            })
        );
      },
    
[/code]

**追記**  
citherさんにコメントをいただいたので、onsenui.jsをカスタマイズしないやり方を試してみました。  
SimpleSlideTransitionAnimatorのfactoryをコピー、値を変更して"slideLtoR"というアニメーションとして動作させます。

参考にしたページ  
[pushPage animation for sliding from right to left
#410](https://github.com/OnsenUI/OnsenUI/issues/410)

[code]

    app.factory('SimpleSlideTransitionAnimatorLtoR', ['NavigatorTransitionAnimator', function(NavigatorTransitionAnimator) {
        var SimpleSlideTransitionAnimatorLtoR = NavigatorTransitionAnimator.extend({
            //
            // 省略
            //
        });
        return SimpleSlideTransitionAnimatorLtoR;
    }]);
    app.run(function(NavigatorView, SimpleSlideTransitionAnimatorLtoR) {
        NavigatorView.registerTransitionAnimator("slideLtoR", new SimpleSlideTransitionAnimatorLtoR());
    });
    
[/code]

