如何使用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'); 
    } 

    });