@munsterlander That was the way to extend animatinos in v1, but unfortunately it won’t work for v2.
@davidfherrerar For Onsen UI 2 right now extending and modifying animators is not an easy task. We still need to make this easier. I’ve made an example with the simple slide animation here.
Basically I made a new animator using simple slide’s pop method in the new push method and changing some minor stuff.
The problem is that the core animators are written in ES6, but here you would need to write ES5 for the browser, and also right now we can only extend the very basic animator, not an already implemented one.
If you really want a pop animation I think right now it would be easier to just delete the pages you don’t need from myNavigator.children HTMLCollection and perform a normal myNavigator.popPage() afterwards.
Anyway, just for the record, this is the code for the custom animator:
// CUSTOM ANIMATOR
var customAnimator = function(options) {
options = options || {};
this.timing = options.timing || 'ease';
this.duration = options.duration || 0.4;
this.delay = options.delay || 0;
var div = document.createElement('div');
div.innerHTML = '<div style="position: absolute; width: 100%; height: 100%; z-index: 2; background-color: black; opacity: 0;"></div>';
this.backgroundMask = div.firstChild;
this.blackMaskOpacity = 0.4;
};
customAnimator.prototype = Object.create(OnsNavigatorElement.NavigatorTransitionAnimator.prototype);
customAnimator.prototype.push = function(enterPage, leavePage, done) {
this.backgroundMask.remove();
enterPage.parentNode.insertBefore(this.backgroundMask, enterPage.nextSibling);
animit.runAll(
animit(this.backgroundMask)
.saveStyle()
.queue({
opacity: this.blackMaskOpacity,
transform: 'translate3d(0, 0, 0)'
})
.wait(this.delay)
.queue({
opacity: 0
}, {
duration: this.duration,
timing: this.timing
})
.restoreStyle()
.queue(done => {
this.backgroundMask.remove();
done();
}),
animit(enterPage)
.saveStyle()
.queue({
css: {
transform: 'translate3D(-45%, 0px, 0px)',
opacity: 0.9
},
duration: 0
})
.wait(this.delay)
.queue({
css: {
transform: 'translate3D(0px, 0px, 0px)',
opacity: 1.0
},
duration: this.duration,
timing: this.timing
})
.restoreStyle(),
animit(leavePage)
.queue({
css: {
transform: 'translate3D(0px, 0px, 0px)',
zIndex: 10000,
display: 'block'
},
duration: 0
})
.wait(this.delay)
.queue({
css: {
transform: 'translate3D(100%, 0px, 0px)'
},
duration: this.duration,
timing: this.timing
})
.wait(0.2)
.queue(function(finish) {
done();
finish();
})
);
};
OnsNavigatorElement.registerAnimator('customAnimator', customAnimator);
