问题你如何顺利地为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％？

2466

2017-09-07 15:02

起源

等一下。我可以使用.animate方法，不是吗？ - Phillip Senn

只需更新宽度百分比即可平滑动画。浏览器必须支持转换才能工作。小提琴展示它。 - James Kleeh

从引导页面：浏览器支持进度条使用CSS3渐变，过渡和动画来实现它们的所有效果。 IE7-9或旧版本的Firefox不支持这些功能。早于Internet Explorer 10和Opera 12的版本不支持动画。 - James Kleeh

詹姆斯：谢谢你们的评论！它看起来不稳定，因为我每秒都会暂停并改变宽度。所以这是因为我想不要一次/秒地去服务器我想。我想知道是否有一个属性，我可以设置为30秒的持续时间？ - Phillip Senn

答案:

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

2017-09-08 17:27

哇弗朗切斯科，非常感谢你！我昨天跑来跑去，只有时间记下一些想法。谢谢你把它放入代码！ - Phillip Senn

@Phillip欢迎你。你的问题很有趣，需要进行充分的研究:) - Francesco Frassinelli

因为链接已经死了，我很乐意刷新那个小提琴。 - Vladislav Rastrusny

热门问题

不使用eval / new函数的JavaScript模板库当涉及内部类时，Java继承如何工作 .NET Windows服务的奇怪问题在.ipa或.app下查找App ID 快速入门XSLT参考[关闭] 如何找出Android应用程序中未使用的资源 Ruby中并发的同步方法[重复] 将std :: chrono :: system_clock :: time_point转换为struct timeval并返回 Google Drive API V3（javascript）更新文件内容 Bootstrap 3.0 - 将元素推到底部受密码保护的.NET ClickOnce部署？如何用postgresql安装wordpress coq Set或Type如何成为命题硒滚动元素进入（中心）视图在Spring Transaction JUnit测试中自动装配Hibernate会话的正确方法 Git的Dockerfile策略如何在FOS_PICKFOLDER中使用IFileDialog，同时仍在对话框中显示文件名在Firefox扩展中复制Google Chrome浏览器操作弹出效果 CakePHP找到MAX 芹菜 - 完成任务的召唤功能从使用fmemopen创建的流中读取宽字符 .NET是否为每个程序集创建一个字符串实习池？ DefaultModelBinder不绑定嵌套模型 Navigator.MediaDevices.getUserMedia（）使用了哪些相机通信标准？选择命名空间名称时应该知道什么？ cout Swagger Codegen CLI Java客户端 - 如何正确使用它一个很好的哈希函数用于采访整数，字符串？ Maven 3 ciManagement配置的目的是什么？如何通过语言文化获取代码页？

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

答案:

热门问题

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