停止后重新啟動CSS3動畫

Question

我嘗試實現一個CSS3列表菜單，其中每個項目都帶有動畫。 在頁面加載時，這是一個隱藏的菜單，並且動畫是通過單擊ID為“＃trigger-overlay”的按鈕開始的。 有一個十字形關閉菜單，我想再次單擊帶有“＃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));
    });
  });
});