Neon animation end of animation event?

Question

I have built a small web applications with polymer and I use neon animations. I want to measure fps in automated tests of specific animations (e.g. hero-animation and ripple-animation). Is there a animationEnd event in neon-animation, or how do I determine the end of the animation?

Answer 1

In neon-animation-runner-behavior, when the animation is complete, the event neon-animation-finish is fired. You can add a listener for this in your element which will call a function when the event is fired. For instance:

<script>
  Polymer({
    is: "my-animated-element",
    behaviors: [
      Polymer.NeonAnimationRunnerBehavior
    ],
    properties: {
      animationConfig: {
        value: function () {
          // config here
        }
      }
    },
    listeners: {
      'neon-animation-finish': '_onNeonAnimationFinish'
    },
    _onNeonAnimationFinish: function () {
      alert("animation finished!");
    }
  });
</script>

More info on how to use the neon-animation elements can be found in this awesome video.