5

css3 キーフレームを使用して、読み込みインジケーター (幅を 0% から 100% まで継続的にアニメーション化するバー) があります。.loadingバーを読み込んでクラスを追加することで、この動作をトリガーします。読み込みが完了したら、キーフレームからアニメーション化したいと思います。たとえば、読み込みが終了した時点で、幅が 50% にアニメーション化されているとします。100% にジャンプするのではなく、100% に緩和して、そのままにしておく必要があります。

ローディング バー クラスにtransitionandを追加しようとしましたが、どちらも機能していないようです。animationどうすればいいですか？

これがjsFiddleです。

4

2 に答える 2

5

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/にあります。他のブラウザをサポートするために使用できる接頭辞を簡単に使用するための小さな関数。

于 2013-10-02T08:34:02.387 に答える