onsen.io angular 1.x 自定义动画从 2.6.2 -> 2.9.2 开始损坏

Question

试图在您的 onsen.io 论坛中提出这个问题，但您的 NEW TOPIC 按钮坏了 - 即使我已登录 - 该按钮什么也没做 - 甚至没有抛出错误... .所以我们到了

我最近升级了 onsen.io 所以我可以有 iPhone-X 兼容性。

现在我的自定义动画坏了

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

这是曾经有效的代码（温泉专家帮助我完善了它）

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

onsen.io angular 1.x 自定义动画从 2.6.2 -> 2.9.2 开始损坏

onsen.io angular 1.x custom animation broken going from 2.6.2 -> 2.9.2

javascript

onsen-ui