Question

我有一个加载指示器（一个使用css3关键帧连续动画其宽度从0％到100％的条形图）。我通过加载栏添加.loading类来触发此行为。现在，一旦我完成加载，我想动画出关键帧。比方说，例如在我完成加载宽度的时候动画到50％我不会让它跳到100％，但是它应该保持在100％的地方。

我尝试在我的加载栏类中添加transition和animation，但似乎都没有效果。我该怎么做？

这是jsFiddle。

Answer 1

您可以使用animationiteration（MDN）事件来检测动画何时到达循环结束，然后删除该类。

$('#bar').on('webkitAnimationIteration', function(e){
    $('#bar').removeClass('loading').off('webkitAnimationIteration');
});

我在这里更新了小提琴：http://jsfiddle.net/jedidiah/kYnhF/6/

-

为了简单起见，我只在小提琴中添加了webkit前缀，但是在javascript中有一篇关于css动画事件的有用文章http://www.sitepoint.com/css3-animation-javascript-event-handlers/，它们共享一些函数来简化使用你可以使用的前缀支持其他浏览器。

Answer 2

我赞成@Jedidiah回答，我认为这就是你所需要的。

BTW，如果您对其他简单的CSS3解决方案感兴趣，请添加到#bar：

transition: all 1s;
-webkit-transition: all 1s

Running Demo

潜在的缺点（取决于您的需求）：

它不会尊重进度条的先前速度（无论你是10％还是90％，剩下的部分都需要1秒才能完成......但这是安装程序的进度表工作的频率，所以这可能不是问题）;
它不会运行所有动画：如果你在上半场，它会填到左边，而不是完成所有的一轮。

使用@keyframes动画后转换

2 个答案: