jquery - 使用 jQuery 更改 Bootstrap 动画进度条动画持续时间

Question

我正在尝试更改 Twitter Bootstrap 动画进度条上使用的 CSS3 动画的持续时间。我想要的结果是使用 jQuery 减少动画的持续时间，以便我有更快的动画。

我有以下 HTML 和 CSS，并使用了以下 jQuery。

HTML:

<div class="progress progress-striped active" style="width:102px;">
    <div id="test" class="progress-bar" role="progressbar">
    </div>
</div>

CSS:

.progress-bar {
    background-color: #bd4a61;
    width: 100%;
}

我正在使用以下 jQuery 来更改值，但这似乎没有任何效果。我使用 Chrome 作为我的测试浏览器，但我似乎在所有浏览器中都得到了这种行为。

jQuery:

$("#test").css("-webkit-animation-duration", "1s");

如果我在执行 jQuery 后获取 animation-duration 的值，它读取为“1s”而不是默认的“2s”，但视觉效果保持不变。

编辑:在设置值后使用 jQuery 隐藏和显示元素似乎可以获得适用于 Internet Explorer 的效果。

Answer 1

至少 Chrome 似乎没有检测到 css 属性 animation-duration 的变化。但是，通过删除然后重新添加 progress-bar 类，更改 animation-duration 时的动画在重新添加 progress-bar 类完成时起作用在 setTimeout 中。

$('#test').css('animation-duration', '0.1s').removeClass('progress-bar');
setTimeout(function() { 
    $('#test').addClass('progress-bar');
}, 1);

这看起来非常丑陋且容易出错，但它确实有效。

另一种在我看来更好的方法 是设置所有动画属性。这无需费力地添加和删除 progress-bar 类:

var secondFraction = '0.2'
$('#test').css('animation', secondFraction + 's linear 0s normal none infinite progress-bar-stripes');