我正在编写一个实现 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"
},
...
但是,那是行不通的。
最佳答案
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;
}
}
关于javascript - Polymer Neon-Animation 多重完成监听器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31420590/