1

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

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

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

事件顺序应该是这样的——

  1. 我点击按钮
  2. 通知出现和消失
  3. 我被自动重定向到另一个页面。
4

2 回答 2

1 
$("#ID").bind('animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd', function(e){
    window.location.href = "someurl";
});
于 2013-06-18T13:58:02.203 回答
0

查看您的 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-21T14:34:41.353 回答