javascript - polymer 如何使用Core-TransitionEnd

我想在一个项目上执行波纹动画后执行一个函数。我目前正在使用以下代码：

<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”的方法，但至今仍无法弄清楚如何使用它。有任何想法吗 ？

谢谢 ！

最佳答案

尝试这样的事情：

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

当有人单击#card1时，事件应触发触发您的警报。

编辑1

要针对不同的卡发出不同的警报，只需执行以下操作：

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

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

这将在core-transitionend事件在DOM树上冒出气泡时起作用。

编辑2

没有jQuery：

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

关于javascript - polymer 如何使用Core-TransitionEnd，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28668719/