Detecting wenn eine SVG-Animation hat

beendet

ich ein SVG-Bild in meinem Körper-Tag habe, die durch den folgenden Code animiert wird:Detecting wenn eine SVG-Animation hat

 <clipPath id="left-to-right"> 
    <rect x="0" y="0" width="0%" height="100%" > 
     <animate attributeName="width" values="0%;100%" dur="5s" fill="freeze"/> 
    </rect> 
</clipPath>

Ich füge die .svg an den Körper über einen Image-Tag wie so:

<body> 
<div id="loading-container"> 
    <img id="silhoutte" src="Images/Silhoutte.svg"> 
</div> 
<div id="content"> 
    /* Content in here */ 
<div> 
</body>

die svg als „Laden“ Animation dient, während i/Cache einige Bilder mit hoher Auflösung vorzuladen, bevor der eigentliche Inhalt angezeigt wird.

Mein Problem besteht darin, das Ende der SVG-Animation zu erkennen, um den Inhalt div aufzudecken. Wie würde ich die Animation möglichst erkennen?

Ich bin offen für Vorschläge zu besseren Möglichkeiten, um einen Web-Seite laden Bildschirm mit dem animierten SVG ich erstellt implementieren.

Vielen Dank!

Quelle

2016-06-18 Jordy Mcnab

Sie verwenden SMIL-Animation SVG, die veraltet ist. Sehen Sie sich stattdessen CSS-Animationen an. Am Anfang nehmen sie ein wenig Übung, um die Browser-übergreifende Leistung sicherzustellen, funktionieren aber gut für SVG-Elemente. –

@FrancisHemsher Kurz nach der Veröffentlichung erkannte ich, dass es veraltet war! Ich werde in CSS-Animationen schauen, um den Effekt von SMIL zu replizieren. Danke für Ihre Antwort! –

Das sollte SVG Element ein onend Ereignis ausgelöst, sobald die Animation beendet ist, so sollte in etwa so funktionieren:

document.querySelector('#left-to-right animate').addEventListener('onend', function() { 
    console.log('Animation finished'); 
}, false);

Quelle

2016-06-18 23:35:27 Schlaus

Nicht, wenn sich die Animation in einem '' Element befindet. Ereignisse feuern von dort nicht ab. –

Wie @RobertLongson in einem Tag hingewiesen, können Sie kein Ereignis auslösen. Ich habe auch gelernt, dass SVG SMIL-Animationen veraltet sind und ich stattdessen CSS-Animationen verwenden sollte. Ich sollte in der Lage sein, das Ereignis Feuer der Animation in CSS Animationen mit der von Schlaus zur Verfügung gestellten Funktion zu bekommen. Danke euch beiden! –

@JordyMcnab sie sind nur in Chrome veraltet. Firefox hat im Moment keine Pläne, sie zu entfernen und sie sind immer noch in der SVG 2-Spezifikation: https://www.w3.org/TR/SVG2/animate.html –

Detecting wenn eine SVG-Animation hat

Antwort

Verwandte Themen