遷移時、詳細は問題

1339 ワード
codepen performance css テキストリンク
対話型インタフェースを開発するとき,情報のダイナミズムとコンポーネントの対話機能を考える必要がある.
この目的に到達する最良の解決策はanimations、transformations、transitionsである.
しかし、私たちの地域では、常に支払うコストがあります.
上記の解決法のうち、遷移は性能上最も安い.:hover、:focusなどの擬似クラスによる状態の変化において、遷移は非常に貴重である.
これは、契約された形で使用される形でありえます
.block {
  transition: width 2s linear;
}
または、その仕様を参照できます.
.block {
  transition-property: color;
  transition-duration: 3s;
  transition-timing-function: linear;
  transition-delay: .5s;
}
グラフィック変更の移行を使用しないことは、「ジャーキー」経験を提供することを意味します.いけない!
私たちには正しいツールがあります.そして、詳細を知って、彼らを正しく使用することを学びましょう、例えば、1つのトランジションがしばしば書かれています
.block {
  transition: all 2s linear;
}
それは無実の声明のように聞こえます、しかし、これは我々のブラウザーを変化を受けた特性の検索に導きます.

We need to be specific in CSS declarations and help our browsers to read our CSS lightly, saving their resources as much as possible.


Codepenでは、3人の銃係のうちの1つの:focusまたは:hoverで、私は2つのトランジションを適用します
transition: transform 9000ms cubic-bezier (0.075, 0.82, 0.165, 1), filter 900ms cubic-bezier (0.075, 0.82, 0.165, 1);
私は個々のプロパティを参照して、各宣言で具体的です.
[白俊]19236青少年サメ
Pythonデータ構造セット、Dictionary