そのため、CSS3トランジションとアニメーションの両方を実行する方法を理解しています。はっきりしないのは、私がググってみましたが、いつどれを使用するかです。
たとえば、ボールをバウンドさせたい場合は、アニメーションが最適です。キーフレームを提供すると、ブラウザが中間フレームを実行し、素晴らしいアニメーションが作成されます。
ただし、いずれの方法でも上記の効果が得られる場合があります。シンプルで一般的な例は、Facebookスタイルのスライド式ドロワーメニューを実装することです。
この効果は、次のような遷移によって実現できます。
.sf-page {
-webkit-transition: -webkit-transform .2s ease-out;
}
.sf-page.out {
-webkit-transform: translateX(240px);
}または、次のようなアニメーションを通じて：
.sf-page {
-webkit-animation-duration: .4s;
-webkit-transition-timing-function: ease-out;
}
.sf-page.in {
-webkit-animation-name: sf-slidein;
-webkit-transform: translate3d(0, 0, 0);
}
.sf-page.out {
-webkit-animation-name: sf-slideout;
-webkit-transform: translateX(240px);
}
@-webkit-keyframes sf-slideout {
from { -webkit-transform: translate3d(0, 0, 0); }
to { -webkit-transform: translate3d(240px, 0, 0); }
}
@-webkit-keyframes sf-slidein {
from { -webkit-transform: translate3d(240px, 0, 0); }
to { -webkit-transform: translate3d(0, 0, 0); }
}次のようなHTMLの場合：
<div class="sf-container">
<div class="sf-page in" id="content-container">
<button type="button">Click Me</button>
</div>
<div class="sf-drawer">
</div>
</div>そして、この付随するjQueryスクリプト：
$("#content-container").click(function(){
$("#content-container").toggleClass("out");
// below is only required for css animation route
$("#content-container").toggleClass("in");
});私が理解したいのは、これらのアプローチの長所と短所は何ですか。
- 明らかな違いの1つは、アニメーション化ではコードがかなり多くなることです。
- アニメーションにより柔軟性が向上します。スライドアウトとインで異なるアニメーションを使用できます
- パフォーマンスについて言えることはありますか？どちらもハードウェアアクセラレーションを利用していますか？
- どちらがよりモダンで、今後の道のり
- 他に何か追加できることはありますか？