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

Question

I have multi-player game with a 30 second timer at the bottom of the screen. If none of the players make a move for 30 seconds, the form submits.

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);

Each second, I check the Application scope to see if anyone has changed the value of

Application.LastMove

I want the progress bar to animate smoothly, but I don't want to do it by reducing the timeout value. I think that checking to see if anyone has taken a move every second is enough load on the server already.

I've heard of WebSockets, but my current server is on ColdFusion 8, so (I think) I'm satisfied with doing an ajax call every second, unless you feel that ajax is not as elegant and from a less civilized age.

Q: How do you animate a twitter-bootstrap progress bar smoothly from 3.3% to 6.6%?

Answer 1

Don't animate using jQuery, prefer CSS animation, unless you have to support old browsers.

I've made this copying from Bootstrap style:

.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;
}

For so long transition, I suggest you to try different animations: http://www.the-art-of-web.com/css/timing-function/

In my example I've added two things that could be usefull:

1. Button text changes when the animation starts and when it ends (just to check animation timings)
2. Check if the browser support this animation: you can use your jQuery code as fallback mode

For more information about how to detect CSS animation support: https://developer.mozilla.org/en-US/docs/CSS/CSS_animations/Detecting_CSS_animation_support

Example: http://jsfiddle.net/CUbgr/5/