SVG CSS动画绘制和删除点击

Question

我想创建一个菜单打开和关闭动画通过绘制一个圆圈/甜甜圈SVG形状，显示一些图标，然后我会太抽取（我知道这不是一个真正的单词，但它最适合描述）/删除形状并在菜单关闭时隐藏图标。

我已经得到了尽可能绘制形状并显示按钮打开时的图标，但无论我尝试过什么，当我尝试擦除/取消它时，它只是消失。

其次，如果您再次单击以再次打开菜单，它不会在第二次执行动画。

这是我迄今所取得的Fiddle！任何帮助将不胜感激。

.circle_animation { 
    stroke-dasharray: 377; 
    stroke-dashoffset: 377; 
} 

.circle_animation { 
    -webkit-animation: MenuOpened 1s ease-out forwards; 
    animation: MenuOpened 1s ease-out forwards;  
} 


@-webkit-keyframes MenuOpened { 
    to { 
    stroke-dashoffset: 0; 
    } 
} 

@keyframes MenuOpened { 
    to { 
    stroke-dashoffset: 0; 
    } 
} 

@-webkit-keyframes MenuClosed { 
    to { 
    stroke-dashoffset: 377; 
    } 
} 

@keyframes MenuClosed { 
    to { 
    stroke-dashoffset: 377; 
    } 
} 

感谢

安东

Answer 1

有几个与你的代码的问题。

的一个是造成你的主要问题是这一行：

$(".MenuSVG").hide(); 

这是造成你的SVG当您点击关闭按钮尽快隐藏。所以你不会看到“未画”动画。

我想你的意思是：

setTimeout(function(){$(".MenuSVG").hide();}, 1000); 

一旦是固定的，你可以工作，为什么关闭动画不起作用。

如果你要作弊，有一个工作版本浏览：

https://jsfiddle.net/v4hw87nc/6/