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>

然而，当我运行这样做时，我无法完全看到涟漪动画，它被 'alert-dialog' 打断了。我如何修改它以便仅在波纹完成后才显示警报？我遇到了一种名为 '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");
});

Polymer如何使用Core-TransitionEnd

Polymer how to use Core-TransitionEnd

html

javascript

polymer