Navigator.replacePageでページ移動する際にアニメーションなどを指定できますが毎回右から左になっているので逆からの遷移を表現できません。左から右にする方法はあるのでしょうか?
2 件の回答
理解できる範囲で解析しただけなので詳しく説明できませんが、onsenui.jsをカスタマイズしないと左から右は無理のようです。
SimpleSlideTransitionAnimator()、IOSSlideTransitionAnimator()を直接改造するか、新たに左から右用を追加すれば実現できると思います。
// 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()
};
SimpleSlideTransitionAnimator()だけ試してみましたが、translate3D()のX軸の値を左から右に変更したところ、実現できました。
※11908行にSimpleSlideTransitionAnimatorのfactoryを定義した行があります。
pushの部分だけ抜粋しますが、enterPageは100%(右)から0(左)に移動するので、-100%(左)に変更すれば0(右)に向かって移動します。
押し出されるleavePageは0(右)から-45%(左)に移動するので、45%(右)に変更すれば0(左)から右に移動します。
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();
})
);
},
追記
citherさんにコメントをいただいたので、onsenui.jsをカスタマイズしないやり方を試してみました。
SimpleSlideTransitionAnimatorのfactoryをコピー、値を変更して"slideLtoR"というアニメーションとして動作させます。
参考にしたページ
pushPage animation for sliding from right to left #410
app.factory('SimpleSlideTransitionAnimatorLtoR', ['NavigatorTransitionAnimator', function(NavigatorTransitionAnimator) {
var SimpleSlideTransitionAnimatorLtoR = NavigatorTransitionAnimator.extend({
//
// 省略
//
});
return SimpleSlideTransitionAnimatorLtoR;
}]);
app.run(function(NavigatorView, SimpleSlideTransitionAnimatorLtoR) {
NavigatorView.registerTransitionAnimator("slideLtoR", new SimpleSlideTransitionAnimatorLtoR());
});
-
補足しますと、OnsenUIを直接カスタマイズする必要は無いです。pushPageやpopPageのanimationオプションには
NavigatorTransitionAnimator
オブジェクトを渡せますので、SimpleSlideTransitionAnimator辺りをコピーしてきてパラメータをいじって自前のAnimatorオブジェクトを作成すればOKです。 ja.onsen.io/guide/overview.html#Transitionanimation– citherCommented 2015年9月16日 0:02
ありがとうございます動きました
onsenuiのSimpleSlideTransitionAnimatorの部分を使用してパラメータを一部調整すればいけました。
slideの向きが片方しかないのでなんとかする方法はないかと悩んでいましたがonsenuiのソースをあまり弄りたくなかったので独自にfactoryを利用する方法は助かります。
<!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>