火狐浏览器中bootstrap进度条行为异常奇怪

Question

我是一名有用的助手，可以翻译文本。

我的应用中有一个简单的动画 bootstrap 进度条，在 Firefox 中表现奇怪。

HTML:

<div id="render-progress" class="progress progress-striped active" >
  <div class="bar" style="width: 25%; height:100%;background-color: #CCCCCC;"></div>
</div>

JS：

$('#render-progress .bar').animate({width:'50%'}, 2000);

在Chrome中，它从25％到50％，就像应该的那样，但在Firefox中，它从25％增加到75％，然后再变为50％。

这让我疯了，我无法弄清楚为什么会这样。 请参见FIDDLE：http://jsfiddle.net/dv4Hd/12/

- Yarin

---

@MageshKumaar 小于什么？ - Yarin

将进度条的宽度设置为像素。 - Bruno Calza

似乎只有10%的工作正常。很奇怪。 - Chris Rockwell

可能相关：https://dev59.com/hWw15IYBdhLWcg3wCXKJ 尽管引用的错误在'07年被标记为已修复？ - Chris Rockwell

我认为这证实了它是一个关于动画百分比的 bug 问题：http://jsfiddle.net/dv4Hd/23/ - Chris Rockwell

@ChrisRockwell - 我认为你说得对 - 想回答一下吗？ - Yarin

Answer 1

$('.bar').animate({width:'50%'});

这似乎能正常工作

但时间属性消失了 :/ !

不过你仍然可以用过渡延迟的方式获取它 :)

注意 : 我不确定，但我感觉如果在animate函数中设置的时间值和transition-duration的值相同

$('.bar').animate({width:'50%'},2000);

在 CSS 中：

transition-duration:2s

动画似乎正常工作 :)

- Magesh Kumaar

---

有趣的是，当排除持续时间时，错误不会出现。这应该有助于调试。 - Chris Rockwell

我有点困惑。这个 bug 是来自时间属性还是其他什么？有趣。不是吗？ - Magesh Kumaar

Answer 2

这似乎是一个关于使用百分比进行动画的jQuery bug。这在这里有所提及，但被标记为1.7版本已修复 - 在1.8.3中它重新出现。将jQuery版本更改为1.6.4或1.7.2会使其按预期工作。

此外，转换为像素可按预期工作：http://jsfiddle.net/dv4Hd/24/。

// Must include code when linking to fiddle
var $progressBar = $('#render-progress .bar');
var percentIncrease = 0.50;
var parentWidth = $('.progress').width();
var increasePx = parentWidth * percentIncrease;
$progressBar.animate({width:increasePx}, 2000)

我会搜索队列，以确保报告没有在进行中，如果没有，本周将提交一个。

- Chris Rockwell

---

我已确认像素正常工作，所以现在我正在使用它- 感谢您研究错误并跟进- 如果您从他们那里听到回复，请更新我们。 - Yarin

Answer 3

问题出在你只能动画到 50% ，如果设置比这更少，那么在 Chrome 中也会面临问题 demo，因为最后的位置是那个位置，你正在使用 css3 动画到 75%。

所以现在在 jQuery 中，你的 100% 动画相当于 css 中的 75%，然后你就不会遇到问题了。demo

- Bhojendra Rauniyar

---

抱歉，我不明白你的逻辑或者你提出的解决方案。你是在说无法将动画设置为50%吗？ - Yarin