Question

我使用Snap.SVG创建了一个类似于点击冒险的网站。它有点工作！但是我想改进它。

www.esad.se （单击右侧的箭头转到下一个图像！）

我们遇到的最大问题（当时教师帮助我）是迭代我的SVG集合 - 单击SVG会导致新图像和新的svg加载到主页面。我们使用的解决方案是指向包含SVG路径的数组，并通过使用

操纵DOM来终止旧SVG

  event.target.parentNode.parentNode.remove()

我们虽然可能不是最好的解决方案，特别是因为它不允许在svgs之间平滑过渡。

是否有办法使用加载方法实现SVG之间的平滑过渡（例如，交叉淡入淡出）？

感谢您的见解。

＆＃13;

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

＆＃13;

Answer 1

我只是用CSS类来做。将从DOM中删除元素的行更改为：

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

然后在你的CSS中添加元素：

opacity: 1;
transition: opacity 1.5s;

为淡出添加新风格：

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

使用SNAP.SVG平滑加载SVG

1 个答案: