Question: Question:
Animation etc. can be specified when moving the page with Navigator.replacePage, but since it is from right to left every time, the transition from the opposite cannot be expressed. Is there a way to go from left to right?
Answer: Answer:
I can't explain it in detail because I just analyzed it as far as I can understand, but it seems impossible from left to right without customizing onsenui.js.
I think that it can be realized by directly modifying SimpleSlideTransitionAnimator () and IOSSlideTransitionAnimator (), or by adding a new one from left to right.
// 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()
};
I tried only SimpleSlideTransitionAnimator (), but when I changed the X-axis value of translate3D () from left to right, it was realized.
* 1 There is a line that defines the factory of SimpleSlideTransitionAnimator in line 908.
Only the push part is excerpted, but enterPage moves from 100% (right) to 0 (left), so if you change it to -100% (left), it will move toward 0 (right).
The extruded leavePage moves from 0 (right) to -45% (left), so changing it to 45% (right) will move it from 0 (left) to the right.
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();
})
);
},
postscript
I got a comment from cither, so I tried the method without customizing onsenui.js.
Copy the factory of SimpleSlideTransitionAnimator, change the value and make it work as an animation called "slideLtoR".
Referenced page
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());
});