3

を使用して JavaScript を介してanimation-duration(この場合は) プロパティを変更した後、Chrome の要素インスペクタに変更が表示されますが、実際のアニメーション速度は変更されません。また、要素インスペクタで値を手動で変更しても、変更はありません。-webkit-animation-durationsetProperty("-webkit-animation-duration", value + "s")

次のイベントリスナーに接続されているアニメーション速度値を取得するように入力フィールドを設定しました（orbitFactor他の場所で定義されたグローバル変数です）：

function updateSpeed(event) {
     var planetDiv = document.getElementById(event.target.id);
     planetDiv.style.setProperty("width", event.target.value / orbitFactor);
     planetDiv.style.setProperty("height", event.target.value / orbitFactor);
     planetDiv.style.setProperty("-webkit-animation-duration", event.target.value + "s");
}

イベント リスナーは確実に呼び出され、-webkit-animation-duration値は要素インスペクターで変化しますが、アニメーションの速度は変化しません。に関して私がここで見逃しているものはあり-webkit-animation-durationますか? 同じ方法を使用して変更している他のプロパティ (例:widthおよび) は、目に見えて変化します。height

前もって感謝します

編集: これは Chrome 40 の問題ですが、Chrome 42 と Firefox 35 では正常に動作することに注意してください。

4

3 に答える 3

1

w3c標準では、アニメーションの継続時間を変更できるかどうかについては言及されていません。だからそれはすべてexplorer.chromeに依存しますはい、しかしいいえ。そのため、時間を変更したい場合はアニメーション全体を更新する必要があります。

var animation = 'animationName time linear infinite'; var $element= $('selector').css('animation', 'none'); setTimeout(function(){ $element.css('animation', animation); }); これはIEで動作します

于 2016-11-29T03:22:18.157 に答える