聚合物如何使用Core-TransitionEnd

Question

我想在一个项目上的涟漪动画执行后执行一个函数。我现在使用以下代码：

<post-card id="card1"> 
      <img width="70" height="70" 
      src="../images/start.png"> 
      <h2>Proceed</h2> 
      <paper-ripple fit class="recenteringTouch"></paper-ripple> 
     </post-card> 

这是一张包含图像和文本的卡片。当我点击这个，下面做：

<script type="text/javascript"> 
    document.getElementById("card1").addEventListener("click", function(){ 
    alert("Hello World!"); 
}); 
</script> 

当我运行这个然而，我不能完全看到波纹动画，并得到由“警报的对话框”中断。 我该如何修改它，以便只有在波纹完成后才显示警报？ 我遇到了一种叫做'core-transitionend'的方法，但还没有弄清楚如何使用它。有任何想法吗 ？

谢谢！

Answer 1

尝试这样：

$("paper-ripple").on("core-transitionend", function(){ 
    alert("Hello World!"); 
}); 

当有人点击#card1事件应该火生土您的警报。

EDIT1

要做到针对不同的卡不同的警报只是这样做：

$("#card1").on("core-transitionend", function(){ 
    alert("Hello World 1!"); 
}); 

$("#card2").on("core-transitionend", function(){ 
    alert("Hello World 2!"); 
}); 

为core-transitionend事件冒泡的DOM树这将工作。

EDIT2

没有jQuery的：

document.getElementById("card1").addEventListener("core-transitionend", function(){ 
    alert("hello world"); 
});