2016-06-17 3 views
0

JavaScriptを使ってCSSアニメーションを最適化することができます。動的タブを作成する指示を作成していますが、トランジション間でアニメーションを実装したいと思っています。それらを最適化する。このディレクティブはtab-nav-barにあります。このバージョンはアニメーションをサポートしていないため、誰かがそれをどのように実装するのが最適かという考えがあります。JavaScriptを使ってCSSアニメーションを最適化する

+0

2D CSSの3D同等物を使用してみてください機能は、あなたは思っていないだろうが、それは後者のものがハードウェアアクセラレーションを使用するので、パフォーマンスに役立ちます –

+0

ニース私はしようとします – 1fabiopereira

答えて

0

CSS(またはJS even)を使用したアニマティンのものが正しいプロパティに焦点を当てるときに、最も重要なことを探します。その中にはレイアウト全体が再描画されるものもあります。

心に留めておくべき最も重要なことがある - 変換性質、およびないが「正しい」、「左」、「幅」など

をアニメーションあなたがスムーズに詳細を読むことができますアニメーションin this articleとアニメーション化するのに最適なプロパティのリストはhereです。

有効なアニメーションを使用する別の方法は、GSAPのようなjsアニメーションライブラリを使用することです。これは、単純な構文を持ち、非常に効果的である - ここにある小さなdemo of it's basic capabilities

ここGSAP構文の小さな例です:

//pulsate the box using scaleX and scaleY 
TweenMax.to(elementSelector, 1.2, { 
scaleX:0.8, 
scaleY:0.8, 
force3D:true, 
yoyo:true, 
repeat:-1, 
ease:Power1.easeInOut 
}); 

は、そしてここだhome page of GSAP

関連する問題