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/

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

动画开始时以及结束时（仅检查动画时间）按钮文本会发生变化
检查浏览器是否支持此动画：您可以将jQuery代码用作后备模式

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

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

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

1 个答案: