如何使用jQuery第二次點擊CSS動畫

Question

我做了下列菜單圖標的CSS動畫，當我點擊它時觸發。我想讓它在第二次使用jQuery時點擊它的動畫。

#path1 { 
    stroke-dasharray: 33px; 
    stroke-dashoffset: 33px; 
    animation: line 1.5s linear forwards; 
    animation-play-state: paused; 
} 

@keyframes line { 
    100% { 
    stroke-dashoffset: -15.5; 
    } 
} 

#halfLineLeft { 
    transform-origin: 1% 50%; 
    animation: shrinkleft 1s linear forwards; 
    animation-play-state: paused; 
} 

#halfLineRight { 
    transform-origin: 100% 1%; 
    animation: shrinkleft 1s linear forwards; 
    animation-play-state: paused; 
} 

@keyframes shrinkleft { 
    100% { 
    transform: scale(0,1); 
    } 
} 
svg { 
    transform: translate(350px, 200px); 
} 

，這是jQuery的，我有那麼遠，

$("svg").click(
    function(){ 
    $("#path1, #halfLineLeft, #halfLineRight").css("animation-play-state", "running"); 
    } 
); 

我似乎無法弄清楚如何使它在反向動畫時，我對SVG圖標點擊第二次。我想這個代碼沒有任何的運氣：

$("svg").click(
    function(){ 
    $("#path1, #halfLineLeft, #halfLineRight").css("animation-state", "running"), 
    $("#path1, #halfLineLeft, #halfLineRight").css("animation-direction", "reverse"); 
    } 
); 

這裏與上述實時動畫codepen鏈接：

http://codepen.io/anon/pen/xEORBJ

Answer 1

我不知道這是最有效的方式，但添加反向關鍵幀和切換類似乎工作。

codepen example

#path1.active { 
    animation: line 1.5s forwards; 
} 

#path1.inactive { 
    stroke-dashoffset: -15.5; 
    animation: unline 1s linear forwards; 
} 

#halfLineLeft.active { 
    animation: shrinkleft 1s linear forwards; 
} 

#halfLineRight.active { 
    animation: shrinkleft 1s linear forwards; 
} 

#halfLineLeft.inactive { 
    transform: scale(0, 1); 
    animation: unshrinkleft 1s linear forwards; 
} 

#halfLineRight.inactive { 
    transform: scale(0, 1); 
    animation: unshrinkleft 1s linear forwards; 
} 

#path1 { 
    stroke-dasharray: 33px; 
    stroke-dashoffset: 33px; 
} 

@keyframes line { 
    100% { 
    stroke-dashoffset: -15.5; 
    } 
} 

@keyframes unline { 
    100% { 
    stroke-dashoffset: 33px; 
    } 
} 

@keyframes shrinkleft { 
    100% { 
    transform: scale(0, 1); 
    } 
} 

@keyframes unshrinkleft { 
    100% { 
    transform: scale(1, 1); 
    } 
} 

#halfLineLeft { 
    transform-origin: 1% 50%; 
} 

#halfLineRight { 
    transform-origin: 100% 1%; 
} 

svg { 
    transform: translate(50px, 50px); 
} 

$("svg").click(
    function() { 
    $("#path1, #halfLineLeft, #halfLineRight").toggleClass("active"); 

    if (!$("#path1, #halfLineLeft, #halfLineRight").hasClass("active")) { 

     $("#path1, #halfLineLeft, #halfLineRight").addClass("inactive"); 

    } else { 
     $("#path1, #halfLineLeft, #halfLineRight").removeClass("inactive"); 
    } 
    } 
); 

Answer 2

您可以添加一個類，然後將其刪除。檢查此

$("svg").on('click',function(){ 
    if($("#path1, #halfLineLeft, #halfLineRight").hasClass('forward')){ 
     $("#path1, #halfLineLeft, #halfLineRight").css("animation-direction", "reverse").removeClass('forward'); 
    }else{ 
    $("#path1, #halfLineLeft, #halfLineRight").css("animation-play-state", "running").addClass('forward'); 
    } 

    });