Gleichmäßiges Laden von SVGs mit SNAP.SVG

Question

Ich machte eine Point-and-Click-Adventure-ähnliche Website mit Snap.SVG. Es funktioniert irgendwie! aber ich möchte es verbessern.

www.esad.se (klicken Sie auf den Pfeil auf der rechten Seite, um zum nächsten Bild zu gehen!)

das größte Problem, das wir (zusammen mit dem Lehrer mich zu dieser Zeit zu helfen) begegnete, war durch meine Sammlung von SVGs iterieren - Wenn Sie auf eine SVG klicken, wird ein neues Bild und eine neue SVG in die Hauptseite geladen. die Lösung, die wir verwendet wurde, zu einem Array mit der SVG Pfade und zu töten, die alte SVG durch Manipulation des DOM mit

event.target.parentNode.parentNode.remove() 

, die wir allerdings war wahrscheinlich nicht die beste Lösung zu zeigen, vor allem, weil Es erlaubt keinen reibungslosen Übergang zwischen SVGs.

Wäre es möglich, eine Lademethode zu verwenden, um fließende Übergänge zwischen meinen SVGs zu erstellen (z. B. eine Überblendung)?

danke für Ihre Einblicke.

var s = Snap("#svg"); 
 
    var first = "A1.JPG" 
 
    var data = { 
 
     "A1.JPG" : {viens : "A2.JPG", svg : "1.svg"}, 
 
     "A2.JPG" : {viens : "A3.JPG", svg : "2.svg", scroll : 600} 
 

 
    // [... etc] 
 
    
 
    } 
 

 
    var currentPath = data[first] 
 
    document.images.main.src = first 
 

 

 

 

 
    var mySvg = Snap.load(currentPath.svg, function(loadedFragment){ 
 
     s.append(loadedFragment) 
 
     s.click(getEventElement) 
 
     window.scroll(0,0) 
 
    }); 
 

 

 
    function getEventElement(event) { 
 
     if(event.target.localName == 'svg') { return } 
 

 
     target = event.target.parentNode.id 
 

 
//  if (target == "noclick") {return} 
 

 
if(currentPath[target] == undefined) { 
 

 
return 
 
} 
 

 
document.images.main.src = currentPath[target] 
 
currentPath = data[currentPath[target]] 
 
     //this.clear() 
 
     event.target.parentNode.parentNode.remove() 
 

 
     if(currentPath.hasOwnProperty("scroll")){ 
 
     window.scroll(currentPath.scroll,0) 
 
     }else{ 
 
     window.scroll(0,0) 
 
     } 
 

 
     mySvg = Snap.load(currentPath.svg, function(loadedFragment){ 
 
     s.append(loadedFragment) 
 
     //s.click(getEventElement) 
 
     }); 
 

 

 

 
    }

Answer 1

würde ich es einfach tun mit einer CSS-Klasse. Ändern Sie die Zeile, wo Sie das Element aus dem DOM entfernen:

event.target.classList.add('fade-out'); 
setTimeout (function() { 
    event.target.parentNode.removeChild(event.target); 
}, 2000); 

Dann in Ihrem CSS für das Element hinzufügen:

opacity: 1; 
transition: opacity 1.5s; 

Und fügen Sie einen neuen Stil für den Fade-Out:

.yourSvgClass.fade-out { 
    opacity: 0; 
}