Question

请查看以下链接以供参考：

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

现在，在完成css动画后，如何自动重定向到另一个页面？

事件序列应该是这样的 -

我点击按钮
通知显示和消失
我会自动重定向到另一个页面。

Answer 1

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

Answer 2

查看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>

在css动画之后使用jquery自动重定向页面

2 个答案: