gpt4 book ai didi

javascript - 使用 SNAP.SVG 平滑加载 SVG

转载 作者:行者123 更新时间:2023-11-28 06:09:11 25 4
gpt4 key购买 nike

我使用 Snap.SVG 制作了一个类似点击式冒险的网站。有点管用!但我想改进它。

www.esad.se(单击右侧的箭头转到下一张图片!)

我们遇到的最大问题(以及当时帮助我的老师)是遍历我的 SVG 集合 - 单击 SVG 会导致将新图像和新 svg 加载到主页中。我们使用的解决方案是指向一个包含 SVG 路径的数组,并通过使用 操作 DOM 来终止旧的 SVG

  event.target.parentNode.parentNode.remove()

我们认为这可能不是最佳解决方案,尤其是因为它不允许在 svg 之间平滑过渡。

是否可以使用加载方法在我的 SVG 之间实现平滑过渡(例如,交叉淡入淡出)

感谢您的见解。

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



}

最佳答案

我只会用 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;
}

关于javascript - 使用 SNAP.SVG 平滑加载 SVG,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36269697/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com