2016-06-17 2 views
0

자바 스크립트로 CSS 애니메이션을 최적화하는 것이 가능합니다. 동적 탭을 만드는 지시문을 개발 중이며, 전환 사이에 애니메이션을 구현하고 싶습니다. 그러나 demonram은 매우 느리며, 매우 느립니다. 그들을 최적화하십시오. 내 지시문은 tab-nav-bar에서 사용할 수 있습니다.이 버전은 애니메이션을 지원하지 않으므로이를 구현하는 가장 좋은 방법이 있습니다.자바 스크립트로 CSS 애니메이션 최적화

+0

차원 CSS의 3D 등가물을 사용해보십시오 함수, 당신은 생각하지 않을 것이지만, 성능에 도움이된다. 후자는 하드웨어 가속을 사용하기 때문이다. –

+0

니스 내가 시도 할 것이다. – 1fabiopereira

답변

0

CSS (또는 JS 짝수)가있는 애니메니티의 것들이 올바른 속성에 집중하는 것이 가장 중요한 것입니다. 그 중 일부는 전체 레이아웃을 다시 그립니다.

염두에 두어야 할 가장 중요한 것은 - 속성이 아닌 '왼쪽', '오른쪽'변환 '폭'애니메이션

당신은 매끄러운에 대한 자세한 내용을보실 수 있습니다 애니메이션 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

관련 문제