如何在SVG動畫完成時加載另一個HTML頁面？

我有一個HTML頁面（animation.html），裏面有一個SVG動畫。動畫運行約。 5秒，並且我想在SVG動畫完成時加載另一個HTML頁面（website.html）。如何在SVG動畫完成時加載另一個HTML頁面？

我試過使用jQuery的load功能，但它不起作用。

任何想法？

來源

2016-04-04 Nalepa

'$（'div'）.load（'page'）'like this？ – guradio

您是否試過svg元素上的'onend'？如果您從animation.html網站的代碼創建jsfiddle，這將有所幫助。所以人們可以直接看到它並更新它以向您展示可能的解決方案。 – michaPau

這是我在第一個HTML頁面上的動畫：[動畫SVG]（https://jsfiddle.net/Nalepa/fxtes342/） – Nalepa

你可以做到這一點在JavaScript

setTimeout("location.href = 'http://www.url.com';",300);

來源

2016-04-04 12:34:13

我已經試過這樣：setTimeout("location.href = 'www.url.com';",5000);和正常工作。

來源

2016-04-04 12:46:44 Nalepa

我的建議是首先等到SVG被加載，然後把計時器移動到其他頁面。試試這個：

$('#your_svg_id').load('sample.svg', function(data){ 
    //svg loaded. 
    setTimeout(function(){ 
     window.location='http://redirecthere.com'; 
    }, 5000); //5seconds 
});

來源

2016-04-04 13:46:02

它適用於'SetTimeout'函數。但「sample.svg」，我用什麼取代它？我的svg包含在HTMl文件中，而不是在單獨的svg文件中。 – Nalepa

正如你可以結束過渡處理程序添加到您的SVG路徑的最後一個過渡的解決方案。所以，你不依賴於setTimeout和您可以確保你的動畫實際上已經結束 - 的情況下，你會改變，例如持續時間）

見created jsfiddle

代碼插入您的提琴：

if(a === this.paths.length - 1) { 
    b.addEventListener(e, function (event) { 
     alert("end last transition"); 
     document.location.href = 'https://www.google.fr/'; 
    }); 
}

如果它是最後一個路徑（行：153小提琴）它有一個檢查，它比調用一個警報和重定向到google.fr。（重定向不起作用，因爲谷歌不允許跨源）。

可能有更好的解決方案，但代碼實際上很難調試。所有的對象，變量等被稱爲a，b，c等等，這使得它有點難以更新......

來源

2016-04-04 14:38:26 michaPau

如何在SVG動畫完成時加載另一個HTML頁面？

回答

相關問題