javascript - Polymer如何使用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时，事件应该触发您的警报。

编辑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");
});