javascript - 停止后重新启动 CSS3 动画

Question

我尝试在每个元素上实现一个带有动画的 CSS3 列表菜单。在页面加载时，这是一个隐藏菜单，动画在单击带有“#trigger-overlay”ID 的按钮时开始。有一个十字关闭菜单，我想在新点击带有“#trigger-overlay”ID 的按钮时重新开始动画。我认为缺少一段代码，可能与 style.webkitAnimationPlayState 有关，但我不知道如何。有什么帮助吗？

这是我的代码:

$( "#trigger-overlay" ).click(function() {
    $("ul#menu-main-menu li").each(function (i) {
        $(this).attr("style", "-webkit-animation-delay:" + i * 300 + "ms;"
            + "-moz-animation-delay:" + i * 300 + "ms;"
            + "-o-animation-delay:" + i * 300 + "ms;"
            + "animation-delay:" + i * 300 + "ms;");
        if (i == $("ul#menu-main-menu li").size() -1) {
            $("ul#menu-main-menu").addClass("play")
        }
    });

Answer 1

您可以使用 transitionend 事件处理程序:

function addAnimation($elem) {
    $elem.attr("style", "-webkit-animation-delay:" + i * 300 + "ms;"
        + "-moz-animation-delay:" + i * 300 + "ms;"
        + "-o-animation-delay:" + i * 300 + "ms;"
        + "animation-delay:" + i * 300 + "ms;");
}

$( "#trigger-overlay" ).click(function() {
  $("ul#menu-main-menu li").each(function (i) {
    addAnimation($(this));
    if (i == $("ul#menu-main-menu li").size() -1) {
        $("ul#menu-main-menu").addClass("play")
    }
    $(this).off('transitionend').on('transitionend', function() {
      addAnimation($(this));
    });
  });
});