0

jQuery などのさまざまな Javascript ライブラリを使用して素晴らしいアニメーションを実現できますが。アニメーションの背後にあるテクニックは何ですか？

CSS を使用してページ要素をフォーマットすることが考えられます。

しかし、ページの任意の位置に要素を配置するにはどうすればよいでしょうか? つまり、線ではありません。ブラウザ ウィンドウ内のクライアント領域をペイント キャンバスと考えることができるというのは本当ですか?

私はフロントエンド Web 開発にまったく慣れていません。そして、このジュニアの質問に答えてくれてありがとう。

4

1 に答える 1

3

アニメーション化するjQueryの方法（そして唯一のクロスブラウザーの方法）は、いくつかのCSSプロパティを設定し、少し待って、それらのプロパティを更新し、少し待って、それらのプロパティを更新することです...

e.style.position = "absolute";
time_start = Date.now();
time_end = time_start + 10000;

(function tick(){
  now = Date.now() - time_start;
  if(now > time_end) now = time_end;
  e.style.top = now * speed + top_start;
  if(now < time_end) setTimeout(tick, 13);
}();

関心のあるCSSプロパティは次のとおりです。

  • position: absolute要素を任意の場所に配置できます。
  • display: blockまたは要素にとdisplay: inline-blockを持たせるwidthheight
  • top、、、、がまたはの場合left、要素の位置bottomをright定義します。に優先し、に優先します。positionabsoluterelativeleftrighttopbottom
  • widthheight要素のサイズを定義します。

  • opacity要素をフェードインまたはフェードアウトするようにアニメーション化できます。

  • padding、、border-widthおよびmarginそれぞれのコンポーネントはすべてアニメーション化できます。

色をアニメートすることもできます：border-color、、。colorbackground

于 2012-10-24T11:33:02.480 に答える