自動重定向頁面的CSS動畫完成後，jQuery的

http://tympanus.net/TipsTricks/CSS3TimedNotifications/

現在，CSS動畫完成後，我怎麼自動重定向到另一個網頁？

事件序列想這一點 -

我按一下按鈕
的通知出現和消失
我自動重定向到另一個頁面。

2013-06-18 Sam DG

這很容易：利用回調。 – dfsq

看看這個** [使用jQuery檢測CSS3動畫和轉換結束時]（http://blog.teamtreehouse.com/using-jquery-to-detect-when-css3-animations-and-transitions-end ）** –

看你的HTML和CSS，你需要補充一點：

$("input.fire-check").bind('animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd', function(e){ 
    window.location.href = "http://google.com/"; 
});

編輯1

我你不使用jQuery剛剛意識到。以下是你需要添加（和刪除您之前添加的）什麼：

function whichTransitionEvent(){//detects css transition end on all browsers 
    var t; 
    var el = document.createElement('fakeelement'); 
    var transitions = { 
     'transition':'transitionend', 
     'OTransition':'oTransitionEnd', 
     'MozTransition':'transitionend', 
     'WebkitTransition':'webkitTransitionEnd' 
    } 

    for(t in transitions){ 
     if(el.style[t] !== undefined){ 
      return transitions[t]; 
     } 
    } 
} 

var transitionEnd = whichTransitionEvent(); 
var input = document.querySelector(".fire-check");//get first element with class fire-check 
input.addEventListener(transitionEnd, redirect, false);//event listener redirects when transitions end 
function redirect(){ 
    window.location.href = "http://google.com/"; 
}

編輯3 哎呀我的壞我稍微改變了上面的代碼。讓我知道它是否有效。

你不需要添加jQuery的，但如果你想在這裏是你必須添加在您的<head>標籤之間：

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

來源

2013-06-21 14:34:41 stackErr

我已經添加了你的建議，仍然無法使用！我不知道我要去哪裏錯了！ –

@SamDG我已編輯我的解決方案 – stackErr

唉..沒有運氣..但感謝您的努力..你能告訴我如何使用jquery嗎？ –

$("#ID").bind('animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd', function(e){ 
    window.location.href = "someurl"; 
});

來源

2013-06-18 13:58:02 Ani

您可否抽出一些時間查看此鏈接（constantcontrast.com/animedemo），並告訴我需要做些什麼？ –

@SamDG將此JS添加到您的HTML文件中。它所做的是等待CSS動畫完成，然後重定向到「someurl」。 – stackErr

@stackErr它似乎不工作，因爲我無法找到正確的#ID。你能檢查鏈接，讓我知道它應該是哪一個。 –

自動重定向頁面的CSS動畫完成後，jQuery的

回答

相關問題