thanks for the reply - following the docs i got the animation to successfully drop when PUSHING a page - but i am not successful to get the page to LIFT back up from whence it came on a POP event.
on a POP event the page simply disappears instantly.
Here is my code so far - any guidance would be greatly appreciated.
var dropAnimator = 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;
};
dropAnimator.prototype = Object.create(ons.NavigatorElement.NavigatorTransitionAnimator.prototype);
dropAnimator.prototype.push = function(enterPage, leavePage, done) {
this.backgroundMask.remove();
leavePage.parentNode.insertBefore(this.backgroundMask, leavePage);
const maskClear = ons.animit(this.backgroundMask)
.wait(this.delay + this.duration)
.queue(done => {
this.backgroundMask.remove();
done();
});
ons.animit.runAll(
maskClear,
ons.animit(enterPage)
.saveStyle()
.queue({
css: {
transform: 'translate3D(0px, -100%, 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(),
done()
);
};
dropAnimator.prototype.pop = function(enterPage, leavePage, done) {
this.backgroundMask.remove();
enterPage.parentNode.insertBefore(this.backgroundMask, enterPage);
ons.animit.runAll(
ons.animit(leavePage)
.queue({
css: {
transform: 'translate3D(0px, 0px, 0px)'
},
duration: 0
})
.wait(this.delay)
.queue({
css: {
transform: 'translate3D(0px, -100%, 0px)'
},
duration: this.duration,
timing: this.timing
}),
done()
);
};
// register animation name
ons.NavigatorElement.registerAnimator('drop', dropAnimator);