如何在 Polymer 中保持霓虹灯动画的结束状态？

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

使用侦听器检测动画结束。然后，调用隐藏 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");

然后对于您添加的每个动画，只需将另一个 case 添加到带有 playAnimation() 函数第二个参数值的 switch 语句。我通常使用相同的字符串以使其易于跟踪。

Answer 2

我追查到了问题的根源。

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

在 this._player.onfinish 中，注意 this._player.cancel() 被调用。这个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});
  }
},

如何在 Polymer 中保持霓虹灯动画的结束状态？

How to maintain the end state of a neon animation in Polymer?

polymer

polymer-1.0