Polymer Neon-Animation 多重完成监听器

Question

我正在编写实现 Neon Animation 元素库的 Polymer 元素。我正在为我的元素实现 NeonAnimationRunnerBehavior 行为。这个元素特别有多个动画（运行很好），每个动画结束时需要调用唯一的结束函数。

文档建议使用这样的侦听器：

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

如果您有一个动画回调，这将非常有效。但是我有一个用于悬停、离开悬停状态和单击（点击）我的元素的动画。我尝试探索 neon-animation-finish 事件，但每个动画似乎都相同。

所以，我的问题是：是否可以让每个动画在完成时调用不同的函数？

我希望它是这样的：

....

animationConfig: {
    value: function() {
        return {
            "imageFadeOut": {
                name: "fade-out-animation",
                node: this.$.image,
                complete: "imageFadeOutComplete"
            },
...

但是，那是行不通的。

Answer 1

playAnimation 接受第二个参数，该参数将作为详细信息传递给 neon-animation-finish 事件处理程序，因此您可以这样做：

animateFadeIn: function() {
  this.playAnimation('imageFadeIn', 'imageFadeIn');
},

animateFadeOut: function() {
  this.playAnimation('imageFadeOut', 'imageFadeOut');
},

_animationFinish: function(e, animation) {
  switch(animation) {
    case 'imageFadeOut':
      ...
      break;
    case 'imageFadeIn':
      ...
      break;
  }
}

Polymer Neon-Animation 多重完成监听器

Polymer Neon-Animation multiple finish listeners

javascript

polymer

polymer-1.0