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

Polymer如何使用Core-TransitionEnd

1 个答案: