polymer - 如何在Polymer中保持 NEON 动画的最终状态？

Question

有没有办法保持 NEON 动画的最终状态？我尝试过使用 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'
          }]
        }
      }
    }
  },

基本上，我希望在 hide 动画完成后隐藏 div。你可以在demo中看到红色 div 淡出，但在动画结束后立即出现。

Answer 1

我找到了问题的根源。

打开neon-animation-runner-behavior.html并找到playAnimation函数。

在 this._player.onfinish 内，请注意 this._player.cancel() 被调用。这个取消基本上

Set source to null and clears all effects associated with the previous source content.

更新

最后，我向 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});
  }
},