动画事件的霓虹动画结束？

【问题标题】：Neon animation end of animation event?动画事件的霓虹动画结束？
【发布时间】：2015-08-17 07:15:55
【问题描述】：

我用聚合物构建了一个小型 Web 应用程序，并使用了霓虹灯动画。我想在特定动画（例如英雄动画和波纹动画）的自动化测试中测量 fps。 neon-animation中是否有animationEnd事件，或者我如何确定动画的结束？

【问题讨论】：

一般来说有一个animationend 事件。
我试过那个。但它不适用于纸质材料。我稍后会添加一个jsfiddle
您可以为neon-animation-finish 添加一个监听器，然后调用一个函数。查看 Polycasts 系列的 #23 here，其中包含有关如何使用霓虹动画的一些重要信息

标签： javascript polymer css-animations web-component

【解决方案1】：

在neon-animation-runner-behavior 中，当动画完成时，会触发事件neon-animation-finish。你可以在你的元素中为此添加一个 listener ，它会在事件触发时调用一个函数。例如：

<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 精彩视频中找到。

【讨论】：

有效。在霓虹动画页面中，事件会在霓虹动画页面元素上触发。