SVG CSSアニメーションをクリックして消去します

Question

サークル/ドーナツのSVGシェイプを描き、いくつかのアイコンを表示してメニューの開閉アニメーションを作成しようとしていますが、それは最もよく記述に合っています）/シェイプを消去し、メニューが閉じたときにアイコンを非表示にします。

ボタンを開いたときに形状を描画したりアイコンを表示したりしていますが、何を試しても、消去/取り消そうとすると消えるだけです。

もう一度メニューを開くと、2回目のアニメーションが実行されません。

これは私がこれまで達成したことの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

あなたのコードで問題がいくつかあります。

あなたの主な問題を引き起こしていた一つは、この行です：あなたのSVGはできるだけ早くあなたが閉じるボタンをクリックして非表示にする原因になっている

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

。だから、あなたは "描く"アニメーションを見ることができません。

は、私はあなたが意味を考える：それが固定されると近いアニメーションが動作しない理由を

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

は、あなたが出て作業することができます。

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