css动画后使用jquery自动重定向页面答案

【问题标题】：Automatic page redirect with jquery after css animationcss动画后使用jquery自动重定向页面
【发布时间】：2013-06-14 18:11:18
【问题描述】：

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

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

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

事件顺序应该是这样的 -

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

【问题讨论】：

很简单：使用回调。
看看这个Using jQuery to Detect When CSS3 Animations and Transitions End

标签： javascript css animation redirect

【解决方案1】：

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

【讨论】：

您能抽出一些时间检查一下这个 [链接](constantcontrast.com/animedemo) 并告诉我需要做什么吗？
@SamDG 将此 JS 添加到您的 HTML 文件中。它所做的是等待 CSS 动画完成，然后重定向到“someurl”。
@stackErr 它似乎不起作用，因为我无法找到正确的#ID。你能检查一下链接，让我知道应该是哪一个。

【解决方案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>

【讨论】：

我已经添加了您的建议，但仍然无法正常工作！我不知道我哪里出错了！
啊..仍然没有运气..但感谢您的努力..您能告诉我如何使用 jquery 做到这一点吗？
我都试过了..都没有用.. js 和 jquery 都没有.. 我不知道为什么......反正我已经完成了那个实验。感谢您的大力帮助。