Custom Drop Animation for Onsen 2.5.1 for Angular 1.X
-
Id like an animation for the Navigator that is the opposite of Lift… so a DROP animation.
Re: Custom Navigation Animation (fall/drop)
i got the previous example to work when Onsen was pre 2.0 release…
Now I’m stuck again. I have no idea how to register the new animation so it can be used with the Navigator.
i found this aberrant CODEPEN that shows how to register a name for an animation - but the resulting animation is always a SLIDE regardless of what i change the animators too.
angular.module('onsen').run(function(NavigatorView, SimpleSlideTransitionAnimator) { NavigatorView.registerTransitionAnimator('foo', new SimpleSlideTransitionAnimator()) });
i have my previous animation code ready - i just need a way to hook into onsen’s navigator for use.
Please help!
Thank you
Dan
-
@dirtyred57890 Welcome back! Remember the docs we mentioned in that post? Here. I hope it’s enough :)
I think you are looking for this step:
ons.NavigatorElement.registerAnimator('customAnimationName', customAnimator);
-
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);
-
@dirtyred57890 Two issues:
done()
is called at a wrong timing.backgroundMask
is not correctly removed.
I made some minor changes here:
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, callback) { this.backgroundMask.remove(); leavePage.parentNode.insertBefore(this.backgroundMask, leavePage); ons.animit.runAll( 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() .queue(function(done) { this.backgroundMask.remove(); callback(); done(); }.bind(this)) ); }; dropAnimator.prototype.pop = function(enterPage, leavePage, callback) { 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 }) .queue(function(done) { this.backgroundMask.remove(); callback(); done(); }.bind(this)) ); }; // register animation name ons.NavigatorElement.registerAnimator('drop', dropAnimator);
As a side note, there is an easier way to extend animators described here.
-
That works like a charm! Thank you very much - glad to see ONSEN is still kicking butt. Cheers