16653


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


CC BY-SA 3.0
2015-09-15T09:27:31.220
16634
2015-09-17T14:01:10.517
3965
question
onsen-ui
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]


CC BY-SA 3.0
2015-09-15T15:28:45.443
16653
2015-09-16T02:07:53.007
2015-09-16T02:07:53.007
9566
9566
16634
answer


ありがとうございます動きました

onsenuiのSimpleSlideTransitionAnimatorの部分を使用してパラメータを一部調整すればいけました。

slideの向きが片方しかないのでなんとかする方法はないかと悩んでいましたがonsenuiのソースをあまり弄りたくなかったので独自にfactoryを利用する方法は助かります。

[code]

    <!doctype html>
    <html lang="ja">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="onsenui/css/onsenui.css"/>
        <link rel="stylesheet" href="onsenui/css/onsen-css-components.css"/>
        <script src="onsenui/js/angular/angular.js"></script>
        <script src="onsenui/js/onsenui.js"></script>
        <script>
            var module = ons.bootstrap('my-app', ['onsen']);
    
            module.factory('SimpleSlideTransitionAnimatorLtoR', ['NavigatorTransitionAnimator', function(NavigatorTransitionAnimator) {
                var SimpleSlideTransitionAnimatorLtoR = NavigatorTransitionAnimator.extend({
                    /** Black mask */
                    backgroundMask : angular.element(
                            '<div style="z-index: 2; position: absolute; width: 100%;' +
                            'height: 100%; background-color: black; opacity: 0;"></div>'
                    ),
    
                    timing: 'cubic-bezier(.1, .7, .4, 1)',
                    duration: 0.3,
                    blackMaskOpacity: 0.4,
    
                    init: function(options) {
                        options = options || {};
    
                        this.timing = options.timing || this.timing;
                        this.duration = options.duration !== undefined ? options.duration : this.duration;
                    },
    
                    /**
                     * @param {Object} enterPage
                     * @param {Object} leavePage
                     * @param {Function} callback
                     */
                    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)',
                                            },
                                            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)'
                                            },
                                            duration: this.duration,
                                            timing: this.timing
                                        })
                                        .resetStyle()
                                        .wait(0.2)
                                        .queue(function(done) {
                                            callback();
                                            done();
                                        })
                        );
                    },
    
                    /**
                     * @param {Object} enterPage
                     * @param {Object} leavePage
                     * @param {Function} done
                     */
                    pop: function(enterPage, leavePage, done) {
                        var mask = this.backgroundMask.remove();
                        enterPage.element[0].parentNode.insertBefore(mask[0], enterPage.element[0].nextSibling);
    
                        animit.runAll(
    
                                animit(mask[0])
                                        .queue({
                                            opacity: this.blackMaskOpacity,
                                            transform: 'translate3d(0, 0, 0)'
                                        })
                                        .queue({
                                            opacity: 0
                                        }, {
                                            duration: this.duration,
                                            timing: this.timing
                                        })
                                        .resetStyle()
                                        .queue(function(done) {
                                            mask.remove();
                                            done();
                                        }),
    
                                animit(enterPage.element[0])
                                        .queue({
                                            css: {
                                                transform: 'translate3D(-45%, 0px, 0px)',
                                                opacity: 0.9
                                            },
                                            duration: 0
                                        })
                                        .queue({
                                            css: {
                                                transform: 'translate3D(0px, 0px, 0px)',
                                                opacity: 1.0
                                            },
                                            duration: this.duration,
                                            timing: this.timing
                                        })
                                        .resetStyle(),
    
                                animit(leavePage.element[0])
                                        .queue({
                                            css: {
                                                transform: 'translate3D(0px, 0px, 0px)'
                                            },
                                            duration: 0
                                        })
                                        .queue({
                                            css: {
                                                transform: 'translate3D(100%, 0px, 0px)'
                                            },
                                            duration: this.duration,
                                            timing: this.timing
                                        })
                                        .wait(0.2)
                                        .queue(function(finish) {
                                            done();
                                            finish();
                                        })
                        );
                    }
                });
                return SimpleSlideTransitionAnimatorLtoR;
            }]);
            module.run(function(NavigatorView, SimpleSlideTransitionAnimatorLtoR) {
                NavigatorView.registerTransitionAnimator("slideLtoR", new SimpleSlideTransitionAnimatorLtoR());
            });
    
            module.controller('AppController', function($scope) {
                $scope.page1Move = function(){
                    myNavigator.replacePage('page1.html', {animation: 'slideLtoR'});
                };
    
                $scope.page2Move = function(){
                    myNavigator.replacePage('page2.html', {animation: 'slide'});
                };
            });
    
        </script>
    </head>
    <body ng-controller="AppController">
        <ons-navigator var="myNavigator" page="page1.html"></ons-navigator>
        <ons-template id="page1.html">
            <ons-page>
                <ons-toolbar>
                    <div class="center">Title</div>
                </ons-toolbar>
    
                <p style="text-align: center">
                    <ons-button modifier="light" ng-click="page1Move()">Push1</ons-button>
                    <ons-button modifier="light" ng-click="page2Move()">Push2</ons-button>
                </p>
            </ons-page>
        </ons-template>
        <ons-template id="page2.html">
            <ons-page>
                <ons-toolbar>
                    <div class="center">Title</div>
                </ons-toolbar>
    
                <p style="text-align: center">
                    <ons-button modifier="light" ng-click="page1Move()">Push1</ons-button>
                    <ons-button modifier="light" ng-click="page2Move()">Push2</ons-button>
                </p>
            </ons-page>
        </ons-template>
    </body>
    </html>
    
[/code]

<https://youtu.be/dp3F75f-pAM>


CC BY-SA 3.0
2015-09-17T14:01:10.517
16720
2015-09-17T14:01:10.517
3965
16634
answer