web-dev-qa-db-ja.com

「要素」で「アニメーション」を実行できませんでした：部分的なキーフレームはサポートされていません

私はjqueryを使用してdivにアニメーションを追加しようとします：

$('#footer').animate({ "width" : "13%" },1000);

動作しますが、次のようなエラーがコンソールに表示されます。

「「要素」で「アニメーション」を実行できませんでした：部分的なキーフレームはサポートされていません。」enter image description here

右のリンクをクリックすると：

enter image description here

しかし、ピクセルで値を使用すると、エラーは発生しません：

$('#footer').animate({ "width" : 68 },1000);

レスポンシブな値を使用するソリューションはありますか？

jqueryjquery-animate
6
Mimouni

問題は、.animate()を呼び出す方法です。 jQueryをコードベースに追加しましたが、.animate()を呼び出した方法で Webプラットフォームのアニメーション を使用しています。これをjQueryで正常に動作させるには、次のように変更します。

var player = this.move_.animate();

に

var player = $(this.move_).animate();

しかし、jQuery上でJavaScriptアニメーションを使用する場合は、これを使用できます。

var player = this.move_.animate({transform: [parameters.transformBegin, parameters.transformEnd]});

私はあなたのパラメーターが何であるかわかりませんが、私の例では、アニメーション化している各プロパティの配列として複数のキーフレームを追加しています

7
Joseph Rex

あなたは罠に落ちました。使用している_$_はjQueryではありませんが、コンソールのAPIであり、_document.querySelector_のショートカットです

つまり、$('#footer')はjQueryオブジェクトではなくプレーンなDOM要素を返します。

つまり、_.animate_はjQueryのメソッドではなく要素のメソッドであるため、知らないうちに_jQuery.animate_ではなく Web Animation API を使用しています。

APIが異なり、エラーが発生します。

要するに、jQueryがページで利用可能であることを確認するか、jQuery('#footer').animate(et cetera)を使用します。

5
fregante

ここで正常に動作します： jsfiddle エラーなし

css：

#footer {
  width:100%;
  height:100px;
  background:red;
}

操作したいエレメント（#footer）アニメーションの前に特定のサイズが指定されていません

width（CSSまたはインライン）を#footerおよびエラーなしで動作するはずです

それが役立つかどうか私に知らせて

0
Mihai T