jQueryの私はjQueryの<a href="http://api.jquery.com/animate/" rel="nofollow noreferrer">animate()</a>又は<a href="https://api.jquery.com/addclass/" rel="nofollow noreferrer">addClass()</a>を使用することができる要素を移動する要素

Question

を移動するaddClass（）VS）（アニメーション：

// for simplicity I omitted a lot of boiler code.. 

$("#box").animate({left: 100},{duration: 250}); 

// or addClass() with a CSS class for the box and moving: 

$("#box").addClass("move-box"); 
#box { 
    transition: all 250ms linear; 
} 
.move-box { 
    left: 100; 
} 

Iは、（アニメーション知っている）は、プロパティは、単一の数値であることができるという制限を有しています値（jQuery UIもインポートしない限り）。だから、この質問はボックスを動かすことです。これは数値です。

どの機能を使用してもかまいませんか？パフォーマンスに違いはありますか？

Answer 1

この質問は本当に広範であり、あなたのケースであなたが使っているものは本当に問題ではありません。あなたのアニメーションは非常にシンプルで、多くのリソースを使用して実行することはありません。私はCSSアニメーションをほとんどの時間使用することをお勧めします。ここに理由です：あなたはCSSアニメーションを使用している場合

パフォーマンス

CSSアニメーションは、より速く、鋭く、かつスムーズになります。これはブラウザに組み込まれており、jQueryは追加の計算を必要としません。こうした理由から、CSSアニメーションを使用しているスライダなどの最近のプラグインを見ることもできます。

コントロール

CSSアニメーションは、追加のライブラリをインポートする必要なく、より優れたコントロールを備えています。緩和は、キュービックベジェで簡単に操作可能であり、あなたは...など、CSSでの3Dプロパティをアニメーション

3Dアニメーション

を、アウト・オブ・ボックス、色のようなものをアニメーション変換することができます簡単です。パフォーマンスもCSSを使用して高くなります。

応答

あなたが応答のために異なる値を持っている場合は、すべてのものは、CSSで管理が容易になります。単純なメディアクエリは、かさばる、面倒なJavascript条件の代わりにトリックを行います。また、あなたのアニメーションがいくつかの画面サイズで適用される場合、CSSアニメーションはスタイル内に入れないので、HTMLタグのスタイルをリセットする関数を宣言する必要はありません。style="";簡単に無効にすることができます。

---

jQueryアニメーションを使用する際の唯一のメリットは、セットアップが簡単だということです。キーワード'toggle'もいいですし、あなたはCSSでそれを真似するためにハックアップする必要があります。

Answer 2

"アニメート"したい要素と強調する要素がある場合は、アニメーションを使用します。必要な速度でアニメーションを行うことができますが、HTMLタグにインラインスタイル属性を追加します。これは、アニメーションが必須でない場合には好まれません。クラスを追加するほうがスマートで混乱も少なくなります。マークを残さずにクラスを削除することもできます。しかし、アニメートには、クラスを追加するよりも便利な別の未来があります。つまり、アニメーションの最後に別の関数を追加することができます。アニメーションが停止するたびに別の関数を起動することができますが、アニメーションを作成する必要がなければ上記の説明は役に立ちません。

Answer 3

パフォーマンスが問題であり、あなたのアニメーションは、クラスを追加することによってトリガされた場合は、上記の両方のjQueryのメソッドを上回るであろう、そうするためにバニラJavascriptを使用することができますが：

document.getElementById('box').classList.addClass('move-box'); 

classListは、すべての現代で提供されていますIE10 +を含むブラウザ