Polymer neon cartoon listeners
I am writing a Polymer element that implements the Neon Animation element library . I am implementing behavior NeonAnimationRunnerBehavior
for my element. This element in particular has several animations (which work great) that should call unique end functions when each animation ends.
The documentation suggests using the following listeners:
listeners: {
// this event is fired when the animation finishes
"neon-animation-finish": "imageFadeOutComplete"
},
This works great if you have a single animation callback. But I have an animation for hovering, leaving the hover state and clicking (pressing) my element. I tried to look into the event neon-animation-finish
, but it seems to be identical for every animation.
So my question is, is it possible for each animation call to perform a different function on completion?
I was hoping it would be something like:
....
animationConfig: {
value: function() {
return {
"imageFadeOut": {
name: "fade-out-animation",
node: this.$.image,
complete: "imageFadeOutComplete"
},
...
But it doesn't work.
source to share
playAnimation
takes a second argument which will be passed as a detail to the event handler neon-animation-finish
, so you can do something like this:
animateFadeIn: function() {
this.playAnimation('imageFadeIn', 'imageFadeIn');
},
animateFadeOut: function() {
this.playAnimation('imageFadeOut', 'imageFadeOut');
},
_animationFinish: function(e, animation) {
switch(animation) {
case 'imageFadeOut':
...
break;
case 'imageFadeIn':
...
break;
}
}
source to share