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/