停止後重新啓動CSS3動畫

我嘗試在每個項目上使用動畫實現CSS3列表菜單。在頁面加載時，這是一個隱藏的菜單，動畫開始時點擊帶有「＃trigger-overlay」ID的按鈕。有一個十字會關閉菜單，我想用「＃trigger-overlay」ID在新按鈕上重新開始動畫。我認爲有一段代碼缺失，可能與style.webkitAnimationPlayState有關，但我不知道如何。任何幫助？停止後重新啓動CSS3動畫

這裏是我的代碼：

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

來源

2014-09-11 Titifrim

嘗試建立一個用的jsfiddle工作的例子。我需要查看'play'類的外觀以及關閉菜單按鈕的處理程序的功能。在一個簡單的猜測中，通常當你在javascript函數內部進行一些CSS操作時，規則不會立即應用，而是當瀏覽器決定重新繪製時。通常你可以通過將你的代碼放入setTimeout（fn，0） – Tiborg 2014-09-11 12:38:07

[CSS動畫在重置類時不會重新啓動]的可能重複內部強制進行重繪（http://stackoverflow.com/questions/16050914/css-animation-重新啓動時沒有重新啓動課程） – 2014-09-11 13:38:05

Zach Saucier：確實，雖然接受的答案不是最好的。恕我直言，這將是[這一個]（http://stackoverflow.com/a/16619298/3022387）。 – flowtron 2014-09-11 14:24:59

您可以使用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)); 
    }); 
    }); 
});

來源

2014-09-11 14:14:30 Teo

這不是什麼OP（原始海報）正在尋找。他正在尋找點擊重新開始動畫 – 2014-09-11 14:19:08

停止後重新啓動CSS3動畫

回答

相關問題