如何使用jQuery在第二次单击时反转CSS动画

我做了以下菜单图标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示例

 #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'); } });