你如何顺利地为twitter-bootstrap进度条制作动画？

Question

我在屏幕底部有一个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%？

Answer 1

不要使用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/

在我的例子中,我添加了两个可能有用的东西:

1. 动画开始时和结束时按钮文本会发生变化(只是为了检查动画时序)
2. 检查浏览器是否支持此动画:您可以将jQuery代码用作后备模式

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

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