从2.6.2 -> 2.9.2开始，onsen.io angular 1.x自定义动画中断

Question

我试着在你的onsen.io论坛上问这个问题，但是你的NEW TOPIC按钮坏了--即使我已经登录了--按钮什么也不做--甚至没有抛出一个错误……所以我们就在这里

我最近升级了onsen.io，这样我就可以兼容iPhone-X了。

现在我的自定义动画坏了

dropAnimation.js:15 Uncaught TypeError: Cannot read property 'NavigatorTransitionAnimator' of undefined at dropAnimation.js:15

这是以前工作过的代码( onsen的家伙帮我完善了它)

// register custom lift animation
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);

这是一个简单的升降动画。

Answer 1

名称空间已经简单地更改了-进行此调整会正确地注册动画。

dropAnimator.prototype = Object.create(ons.elements.Navigator.NavigatorAnimator.prototype);

...

ons.elements.Navigator.registerAnimator('drop', dropAnimator);