4

ページが更新されるたびに、特定のアニメーションの継続時間をランダム化したいと考えています。私はjqueryで試してみましたが、うまくいかないようです:うまくいかないようです。

関連する CSS:

#background1 {
    -webkit-animation: background1 10s;
}

アニメーション background1 は別の場所で定義されています。キーフレーム アニメーションの部分を変更しようとしているわけではありません。

Jクエリ:

 var bg1 = $('#background1');
 var number = Math.floor(Math.random() * 10) + 5;
 bg1.css('-webkit-animation', 'background1 ' + number + 's');

何も起こらないようです。jquery初心者を助けますか？

4

3 に答える 3

2

ブラウザーが CSS 宣言を登録すると、アニメーションの名前background1と期間が登録され、10sすぐにアニメーションが開始されます。新しい期間でアニメーションを再開したい場合は、アニメーションが終了するまで待つか、新しい期間で別のアニメーション名を付ける必要があります。

このフィドルでテストできます: http://jsfiddle.net/mfdj/Phnf5/9/

  1. 名前を変更すると、いつでもすぐにアニメーションをトリガーできます
  2. 継続時間に別の値を設定し、現在のアニメーションが終了した後に行う場合にのみ、継続時間を変更して同じアニメーションを再開できます。

最初のアニメーションの長さは 10 秒で、ランダム化された時間で持続時間をすぐにトリガーしたいので、この宣言を削除するだけです。

#background1 {
    -webkit-animation: background1 10s;
}

必要な結果が得られるはずです。

ブラウザーが同じ名前で持続時間が異なる css アニメーションの再アタッチ/再トリガーを処理する方法には、いくつかの癖があることに注意してください。たとえば、フィドルの例では、 Chrome はシェイク アニメーションとフラッシュ アニメーションを異なる方法で処理します。10 秒のアニメーションを開始してから、同じ名前の 1 秒のアニメーションで中断してみてください。シェイクは 10 秒で終了しますが、フラッシュは単にアニメーションをクリアします。ただし、フラッシュからシェイク (およびその逆) に切り替えると、アニメーションは常に新しく開始されます。これらは、知っておく必要がある css でアニメーションをトリガーする際の癖です。

于 2013-08-03T02:54:40.947 に答える
0

Fox指摘したように、その宣言を削除してください。次に、JS を使用して、次のようなことができます。

var bg1 = $('#background1');
var number = Math.floor(Math.random() * 10) + 5;
bg1.css('-webkit-animation', 'background1 ' + number + 's');

物事をきれいに保つためにクラスに入れることもできます（ちょっと）

#background1 .animated {
    -webkit-animation-name: background1;
}

// jQ
$('#background1').addClass('animated').css(
    '-webkit-animation-duration',
    (Math.floor(Math.random() * 10) + 5) + 's'
);
于 2013-08-03T03:07:01.013 に答える