我制作了以下菜单图标 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 http://codepen.io/anon/pen/xEORBJ