Question

我尝试在每个项目上实现带有动画的CSS3列表菜单。在页面加载时，这是一个隐藏的菜单，动画开始时单击按钮，使用＆＃34;＃trigger-overlay＆＃34; ID。有一个十字架来关闭菜单，我想重新开始动画，点击按钮上的＆＃34;＃trigger-overlay＆＃34; 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));
    });
  });
});

停止后重启CSS3动画

1 个答案: