使用@keyframes動畫後的過渡

我有一個使用css3關鍵幀的加載指示器（一個連續動畫從0％到100％的寬度的條）。我通過加載欄添加.loading類來觸發此行爲。現在，一旦我完成加載，我想動畫出的關鍵幀。比方說，當我完成加載的時候，寬度被動畫化爲50％，我不會讓它跳到100％，而是將它緩解到它應該保留的100％。使用@keyframes動畫後的過渡

我已經嘗試在我的加載欄類中添加transition和animation，但都沒有工作。我如何去做這件事？

這裏是jsFiddle。

來源

2013-09-22 chopper

您可以使用animationiteration（MDN）事件來檢測動畫何時到達循環的結尾，然後刪除該類。

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

我已經更新這裏的小提琴：http://jsfiddle.net/jedidiah/kYnhF/6/

爲了簡單起見，我只加了WebKit的前綴小提琴，但有關於CSS動畫的一個有用的文章javascript這裏的事件http://www.sitepoint.com/css3-animation-javascript-event-handlers/他們共享一個小函數來簡化使用可用於支持其他瀏覽器的前綴。

來源

2013-10-02 08:34:02 Jedidiah

謝謝 - 這不是一個壞的解決方案。但是，是否有可能使用不同的轉換跳出當前狀態？我基本上只想簡單地將進度條從現在的位置「填滿」，而不是完成整個週期（如果可能的話） – chopper

啊我明白你的意思了，這有點棘手，尤其是因爲它需要填寫取決於它的動畫有多遠，然後可能有點奇怪，它會突然倒退。我想你可以嘗試和AnimationEvent.elapsedTime（https://developer.mozilla.org/en-US/docs/Web/API/AnimationEvent.elapsedTime） – Jedidiah

工作一些嗯，我看到 - 你是對的，它可能是有點奇怪。有沒有辦法加快過渡，以更快完成？現在的問題是，一個循環需要很長時間，如果進度條在實際加載發生後仍然「加載」一段時間，則感覺無響應。 – chopper

我upvoted @Jedidiah答案，我認爲這是你所需要的。

順便說一句，如果你有興趣的替代，簡單的CSS3的解決方案，然後添加到您的#bar：

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

Running Demo

潛在缺點（根據您的需要）：

它不會尊重以前的速度進度條（無論你是在10％還是90％，剩下的部分都需要1秒鐘才能完成......但這是安裝人員進度條工作的頻率，所以這可能不成問題）;
它不會運行所有的動畫：如果你在上半場，它將填滿左邊，而不是完成全部動作。

來源

2013-10-02 22:14:49

謝謝，但這似乎沒有爲我做任何事情..？ – chopper

哇...我在FF上編碼，現在在Chrome中打開它不起作用：| ...後面的想法是**在一秒鐘內轉換到所有默認屬性**，從'left：0'和'width：100％;'如果它在'width：30％' '.loading'類，它將需要1秒鐘才能返回到100％（默認的'＃bar'）。奇怪的是，它不適用於Chrome：/ –

這也正是我的第一個想法，很驚訝它沒有工作，感覺應該如此。 – Jedidiah

使用@keyframes動畫後的過渡

回答

相關問題