javascript – 如何平稳地动画化twitter-bootstrap进度条？

我在屏幕底部有一个30秒钟的多玩家游戏.
如果玩家没有任何动作30秒,表单提交.

var ProgressValue = 0;
function showProgress() {
    ProgressValue += 100/30;
    if (ProgressValue > 100) {
        $('form').submit();
    }
    // Ajax is done here to see if anyone has made a move.
    $('.progress .bar').css('width',ProgressValue + '%');
    setTimeout(showProgress,1000);
}

setTimeout(showProgress,1000);

每一秒钟,我检查应用范围,看看有没有人改变了它的价值

Application.LastMove

我希望进度条能顺利地动画,但是我不想通过减少超时值来做到这一点.我认为检查每个人是否有人已经采取行动,每秒服务器上已经有足够的负载.

我听说过WebSockets,但是我现在的服务器是ColdFusion 8,所以(我想),除了觉得ajax不那么优雅,文明较少的年龄之外,我很满意每秒进行ajax调用.

问：你如何将twitter-bootstrap进度条从3.3％平均提高到6.6％？

解决方法

不要使用jQuery动画,喜欢CSS动画,除非你必须支持旧的浏览器.

我从Bootstrap样式做了这个复制：

.bar {
  -webkit-transition: width 30.0s ease !important;
     -moz-transition: width 30.0s ease !important;
       -o-transition: width 30.0s ease !important;
          transition: width 30.0s ease !important;
}

对于这么长的过渡,我建议您尝试不同的动画：http://www.the-art-of-web.com/css/timing-function/

在我的例子中,我添加了两件可以有用的东西：

>动画开始时和按钮结束时按钮文字会更改(只是为了检查动画时间)
>检查浏览器是否支持此动画：您可以将jQuery代码用作备用模式

有关如何检测CSS动画支持的更多信息：https://developer.mozilla.org/en-US/docs/CSS/CSS_animations/Detecting_CSS_animation_support

示例：http://jsfiddle.net/CUbgr/5/