霓虹动画结束动画事件?

时间:2015-08-17 07:15:56

标签: javascript polymer css-animations web-component

我用聚合物构建了一个小型Web应用程序,我使用霓虹动画。 我想在特定动画的自动测试中测量fps(例如英雄动画和涟漪动画)。 是否有霓虹动画中的animationEnd事件,或者如何确定动画的结束?

1 个答案:

答案 0 :(得分:1)

neon-animation-runner-behavior中,当动画完成时,会触发事件neon-animation-finish。您可以在元素中为此添加侦听器,该事件在触发事件时将调用函数。例如:

<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>

有关如何使用neon-animation元素的更多信息,请参阅this精彩视频。