SVG CSS Animation zeichnen und löschen beim Klick

Question

Ich versuche, ein Menü zu öffnen und schließen Animation durch Zeichnen eines Kreises/Donut SVG-Form, einige Symbole anzeigen und dann würde ich es auch nicht zeichnen (Ich weiß, das ist kein echtes Wort, aber es passt am besten zur Beschreibung)/löscht die Form und verbirgt die Symbole, wenn das Menü geschlossen ist.

Ich habe so weit wie das Zeichnen der Form und die Anzeige der Symbole, wenn der Knopf geöffnet ist, aber egal was ich versucht habe, wenn ich versuche es zu löschen/esraw verschwinden es einfach.

Zweitens, wenn Sie dann klicken, um das Menü erneut zu öffnen, tut es nicht die Animation das zweite Mal.

Hier ist eine Fiddle von dem, was ich bisher erreicht habe! Jede Hilfe würde sehr geschätzt werden.

.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; 
    } 
} 

Dank

Anton

Answer 1

ein paar Probleme mit Ihrem Code Es gibt keine.

Die eine, die Ihnen die wichtigsten Probleme verursacht wurde ist diese Linie:

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

die Ihre SVG verursacht so schnell versteckt werden, wie Sie die Schließen-Schaltfläche klicken. Sie werden also die "Un-Draw" -Animation nicht sehen.

Ich glaube, Sie gemeint:

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

Sobald diese festgelegt ist, können Sie aus arbeiten, warum die enge Animation funktioniert nicht.

Wenn Sie betrügen wollen, gibt es eine Arbeitsversion hier:

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