如何链接后的CSS动画

How to link after the CSS-Animation?

本文关键字：CSS 动画 链接 何链接      更新时间：2024-02-29

我有一个简单的加载栏，它在进入主页后变得越来越满（用CSS动画制作）。当栏完全填满时，用户应该链接到下一个网站。

HTML很短：

<div id="loadingbar">
    <div id="loadingprogress">
    </div>
</div>

我找到了这个JS代码，但它就是不起作用：

$("#loadingprogress").bind('animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd', function(e){
    window.location.href = "http://www.google.com";
});

怎么了？

将其应用于正在制作动画的loadingprogress，而不是其父

$("#loadingprogress").bind('animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd', function(e){
    window.location.href = "http://www.google.com";
});

更新的jsFiddle

首先我有一些小问题。你在什么jQuery和浏览器上测试这个？我对jQuery 1.10做了一个小改动。在这里，我用了"on"而不是"bind"，并使其发挥了作用。我希望我的代码能对你有所帮助。

测试日期：Google chrome版本31.0.1650.57 FF 25.0.1 Safari 6.1.1

HTML

<div id="loadingbar">
    <div id="loadingprogress">
    </div>
</div>

CSS

#loadingbar{
    background-color:black;
    overflow:hidden;
    width:200px;
    height:20px;
}
#loadingprogress {
  width:100%;
  height:100%;
  background-color:green; 
  -webkit-animation: moveFromLeft 1.5s ease both;
  -moz-animation: moveFromLeft 1.5s ease both;
  animation: moveFromLeft 1.5s ease both;
}
    @-webkit-keyframes moveFromLeft {
      from { -webkit-transform: translateX(-100%); }
    }a
    @-moz-keyframes moveFromLeft {
      from { -moz-transform: translateX(-100%); }
    }
    @keyframes moveFromLeft {
      from { transform: translateX(-100%); }
    }

javascript

(function($){
    var animEndEventNames = ['webkitAnimationEnd',
        'oAnimationEnd',
        'MSAnimationEnd',
        'animationend'].join(" ");
    $("#loadingbar").on(animEndEventNames, function(e){
        window.location.href = "/test.htm";
    });
}(jQuery));

这是我的jsfiddle链接。我希望它能有所帮助！

相关文章：