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开始 - ＆gt; 2.9.2

1 个答案: