javascript-聚合物霓虹灯动画多个完成监听器

我正在编写一个实现Neon Animation元素库的Polymer元素.我正在为我的元素实现NeonAnimationRunnerBehavior行为.特别是,此元素具有多个动画(运行良好),每个动画结束时需要调用唯一的结束函数.

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

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

如果您有一个动画回调,则效果很好.但是我有一个用于悬停,保留悬停状态并单击(点击)我的元素的动画.我曾尝试探索霓虹动画结束事件,但每个动画似乎都一样.

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

我希望是这样的：

....

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

但是,这不起作用.

解决方法:

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,polymer-1-0,javascript
来源： https://codeday.me/bug/20191120/2040668.html