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

有没有办法保持霓虹灯动画的最终状态？我尝试过使用

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'
          }]
        }
      }
    }
  },

...
特性：{
动画配置：{
值：函数（）{
返回{
“隐藏”：[{
名称：“淡出动画”，
节点：this.$.rect，
//这不行！
填充：“前锋”
}]
}
}
}
},

---

基本上，我希望

div

在

hide

动画完成后被隐藏。您可以在中看到红色的

div

淡出，但在动画结束后立即出现。

使用侦听器检测动画的结束。然后，调用一个隐藏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
}

使用此技术时，必须向

playamation

函数添加第二个参数，该参数用作标识符。像这样：

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

---

然后，对于添加的每个动画，只需在switch语句中添加另一个case，其值位于

playAnimation（）

函数的第二个参数中。我通常使用相同的字符串以便于跟踪。

我追踪到问题的根源

打开

neon animation runner behavior.html

并找到

playAnimation

函数

在

this.\u player.onfinish

中，注意

this.\u player.cancel（）

被调用。这

基本上取消了

将“源”设置为null并清除与上一个关联的所有效果
源内容

更新

最后，我向
playAnimation
函数添加了另一个参数，因此每当我需要强制保持结束状态时，我都会向函数添加一个
false
标志，如下所示-

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

这是我提出的最安全的选择，因为它不会中断不同元素中现有的聚合物动画。我相信聚合物团队在未来将能够提出很多解决方案，但就目前而言，这确实起到了作用。：）

neon animation finish
上的
之后，将
hidden
属性设置到该节点如何？@zerodevx考虑过这一点，但当您有许多依赖动画时，它变得非常复杂。是的，它变得复杂-这样做也可能导致FOUC。
neon动画完成
debounces没有帮助；实际上无法判断序列中的哪个节点已完成。
霓虹灯动画
仍然是WIP。对于简单的转换，可以考虑完全跳过API并使用CSS类。@ ZooDeX是的，如果它不支持，我将与Web动画……我现在正是这样做的。当你必须在子元素上播放动画时，它会变得非常混乱…@JustinXL，你到底是如何解决子元素问题的？听上去我也有同样的头痛。我有“animatables”，我想等待它完成，然后触发父元素的退出动画。因此，没有机会使用playAnimation功能利用上述技术。你是如何解决这个问题的？（我使用的是Polymer 1.x btw）@JustinXL，只是补充一下，在我看来，最可行的方法是在父元素上完成动画，然后在子元素上触发事件并在那里处理所有事情
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});
  }
},