Question

有没有办法坚持霓虹动画的最终状态？我曾尝试使用fill: 'forwards'，但似乎没有做任何事情。

  <template>
    <div id="rect" style="width:100px;height:100px;background-color:red"></div>
  ...

  properties: {
    animationConfig: {
      value: function () {
        return {
          'hide': [{
            name: 'fade-out-animation',
            node: this.$.rect,
            // this doesn't work!
            fill: 'forwards'
          }]
        }
      }
    }
  },

基本上我想在div动画结束后隐藏hide。您可以在demo中看到红色div淡出但在动画结束后立即显示。

Answer 1

我找到了问题的根源。

打开neon-animation-runner-behavior.html并找到playAnimation功能。

在this._player.onfinish内，请注意this._player.cancel()。这cancel基本上是

将source设置为null并清除与上一个相关的所有效果来源内容。

<强>更新

最后，我在playAnimation函数中添加了另一个参数，所以每当我需要强制维持结束状态时，我就会向函数添加一个false标志 -

this.playAnimation('unloadCells', null, false);

这是我提出的最安全的选项，因为它不会中断不同元素中现有的Polymer动画。我相信Polymer团队将来能够提出一个很好的解决方案，但暂时不会这样做。：）

playAnimation: function (type, cookie, cancellable) {
  // default its value to true so existing stuff won't be affected
  cancellable = typeof cancellable !== 'undefined' ? cancellable : true;

  var allConfigs = this.getAnimationConfig(type);
  if (!allConfigs) {
    return;
  }
  var allAnimations = this._configureAnimationEffects(allConfigs);
  var allEffects = allAnimations.map(function(animation) {
    return animation.effect;
  });

  if (allEffects.length > 0) {
    this._player = this._runAnimationEffects(allEffects);
    this._player.onfinish = function() {
      this._completeAnimations(allAnimations);

      if (this._player) {
        // when manually set to false, this._player.cancel() will be skipped 
        // so we get to maintain the end state for some scenarios
        if (cancellable) {
          this._player.cancel();
        }
        this._player = null;
      }

      this.fire('neon-animation-finish', cookie, {bubbles: false});
    }.bind(this);

  } else {
    this.fire('neon-animation-finish', cookie, {bubbles: false});
  }
},

Answer 2

使用侦听器检测动画的结束。然后，调用一个隐藏div的函数。

properties: {
  animationConfig: {
    value: function () {
      return {
        'hide': [{
          name: 'fade-out-animation',
          node: this.$.rect,
        }]
      }
    }
  }
},

listeners: {
  // this event is fired when the animation finishes
  "neon-animation-finish": "animationComplete"
},

animationComplete: function() {
    this.$.rect.style.display = "none";
}

如果您需要监听结尾的许多不同动画，请使用switch语句分隔每个动画。

properties: {
  animationConfig: {
    value: function () {
      return {
        'hide': [{
          name: 'fade-out-animation',
          node: this.$.rect,
        }]
      }
    }
  }
},

listeners: {
  // this event is fired when the animation finishes
  "neon-animation-finish": "animationComplete"
},

animationComplete: function(event, animHandler) {
    switch (animHandler) {

        case "hide":
                this.hideFinished();
                break;

        case "show":
                this.showFinished();
                break;

        default: null

    }
},

hideFinished: function() {
//do something
},

showFinished: function() {
//do something
}

使用此技术时，必须向playAnimation函数添加第二个参数，该函数用作标识符。像这样：

this.playAnimation("hide", "hide");

然后，对于您添加的每个动画，只需将另一个案例添加到switch语句中，并使用playAnimation()函数的第二个参数中的值。我通常使用相同的字符串来保持跟踪。

如何在Polymer中保持霓虹动画的最终状态？

2 个答案: