HTML5とCSS3が徐々に主流になったとき、私はJSを使用していくつかの簡単なアニメーションを作成することに非常に慣れています。デスクトップブラウザでは、すべてがCSS3をサポートしているわけではないためです。ユーザーも非常に奇妙です。すべてのユーザーを育成できるわけではありません。 Win7.win8はXPほど有用ではないと考える多くの人々が常にいます。しかし、携帯電話は非常に異なっており、モバイルブラウザはHTML5とCSS3を非常によくサポートしています。ただし、携帯電話のハードウェア処理機能は非常に限られています。今日、クアッドコアとオクタコアの携帯電話が横行しているとき、私のようなデュアルコアまたはシングルコアの携帯電話を使用する人がまだいます。 JSは良いですが、私はあなたとあまり接触していないので、その気持ちをうまく調整することはできません。 i7 PCで簡単なページのスワイプが非常にスムーズに実行されますが、デュアルコアの携帯電話で詰まって、utter音を立て、utter音を立て、utter音を立て、utter音を立てています。とても憂鬱です。このため、私は長い間検索し、たくさん読んでいます。最後に、解決する前に、比較的簡単な方法を見つけました。CSS3を使用してアニメーションを実行します。
過去には、アニメーション、Setimeout、SetIntervalなどのjQueryのアニメーション関数に加えて、要素のマージン、幅、上部、その他のプロパティを変更するためにループしました。まさにこれが私を混乱させます。
まず第一に、SetimeOut、SetIntervalは0msを設定するだけでは常に実行できません。私はかつてこの秘密を誤って発見しました。タイマーの遅延計算は、ブラウザの内蔵クロックに依存しており、クロックの精度はクロックの更新の頻度に依存することがわかります。 IE8と以前のIEバージョンの間の更新間隔は15.6ミリ秒でした。それは終わった、私はそれが10msで1pxの変位を実行すると思う、そしてそれは時間通りにこれを行うことができない。
そして、カードで何が起こっているのですか？カードは、コードが十分に記述されていないためです。結局のところ、JSはシングルスレッドされており、時間がかかるアクションが発生すると、UIは応答しない場合があります。 SettimeOutを使用しましたが、まさにインターフェイスが死んでいないように見えるSettimeOutのためですが、アクションはスムーズではありません。今回のSettimeOutの実行後、次の実行の前に、別の時間のかかるアクションが中間間隔で発生する可能性があるため、SettimeOutの実行は無制限になります。それでは何？カード！ただし、元の属性を変更するときに、カードがブラウザレイアウトを誤ってトリガーする（つまり、リレーアウト）できる別の理由があります。この質問は時間がかかりますが、時間がかかります。時間がかかりますが、しばしば無視することができます。しかし、多くの場合、それは無視することはできません。
上記の2つの段落に加えて、別の問題があります。つまり、多くの携帯電話では常にフレームごとにフレームのように感じられ、フレームごとに長く短い場合もあります。これは皆を台無しにする可能性のあるリズムです。なぜこれが起こっているのですか？それはまだSetimeOutの遅延と関係があります。フレームを破棄します。この問題には、モニターの更新頻度が含まれます。それは本当に複雑すぎます。
最後に、CSS3が選択され、JSは要素の属性を動的に変更し、アニメーションの実行時間を制御するために遷移を使用しました。例えば：
コードコピーは次のとおりです。
<div id = "test" style = "transition：すべて1s ease; width：100px;" >/div>
JS：
コードコピーは次のとおりです。
$（ "＃test"）。width（200）;
このようにして、1秒後、このDivの幅は200pxになります。 Sun Wukongがすぐに大きくなるようなものではなく、彼は立ち往生したり停止したりせずにゆっくりと足を駆け巡ります。また、CSSアニメーションを使用することには利点があります。これは、時間のかかるJSの影響を受けません。 UIスレッドとJSスレッドはブラウザでは相互に排他的ですが、これはCSSアニメーションでは有効ではなく、多くのブラウザーはハードウェアアクセラレーション（Chromeなど）を有効にすることもできます。ブラウザの再レイアウトは通常の状況ではそれほど明白ではありませんが、大規模な再レイアウトは避ける必要があります。したがって、webkit -transformを追加：translatez（0）;または-webkit -transform：translate3d（0,0,0）;ブラウザがこのレイヤーを個別にレンダリングするようにします。再layoutが避けられない場合でも、エリアは小さくなります。実際、翻訳を使用してマージンを置き換えることは非常に賢明な決定です。
最後に、いくつかの一般的な変更により、リレーアウトプロパティがトリガーされます。
コードコピーは次のとおりです。
幅
身長
パディング
マージン
画面
境界線
国境
ミニハイト
上記は、この記事で説明されているすべてのコンテンツです。 JavaScriptとCSS3を学ぶことは誰にとっても役立つことを願っています。同時に、いくつかの欠点を追加して理解してください。