聚合物如何使用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"); 
});