Custom Drop Animation for Onsen 2.5.1 for Angular 1.X

[dirtyred57890]

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

[Fran Diox]

@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);

[dirtyred57890]

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);

[Fran Diox]

@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.

[dirtyred57890]

That works like a charm! Thank you very much - glad to see ONSEN is still kicking butt. Cheers