저는 현재 angular2의 애니메이션을 시험 중이고 표준 CSS 애니메이션/전환보다 어떤 이점이 있는지 궁금합니다.앵귤러 2 애니메이션 대 CSS 애니메이션 - 언제 무엇을 사용합니까?
카드와 호버 효과를 디자인 한 전형적인 소재입니다. 대부분의 CSS 프레임 워크는 호버 (hover) 및 CSS 전환 (css-transitions)을 사용합니다. 각도 2 애니메이션을 사용하면 특별한 이점이 있습니까?
일부 CSS 애니메이션 속성이 GPU를 많이 호출하지 않기 때문에 일부 지연 및 지연이 있습니다. angular2 애니메이션은 어떻습니까?
질문은 실제로 자바 스크립트 애니메이션 대 CSS 애니메이션입니다 (angular2의 애니메이션은 자바 스크립트 애니메이션을 기반으로하기 때문에).
대답은 다음과 같습니다. - CSS 애니메이션을 사용할 수 있습니다.
최신 브라우저는 CSS 애니메이션에 different thread을 사용하므로 자바 스크립트 스레드는 CSS 애니메이션의 영향을받지 않습니다.
HTML5 Animation Speed Test을 사용하면 브라우저에서 다양한 프레임 워크 (javscript 기반) VS CSS 애니메이션의 성능을 확인할 수 있습니다. 일반적
:
브라우저 렌더링 플로우를 최적화 할 수있다. 요약하면 가능한 경우 CSS 전환/애니메이션을 사용하여 항상 애니메이션을 만들어야합니다. 애니메이션이 정말 복잡한 경우 JavaScript 기반 애니메이션을 대신 사용해야 할 수 있습니다.
당신은 특별히 Angular2 애니메이션에 대해 알고 싶다면 - 애니메이션이 CSS가있는 경우 당신의 브라우저에서 요소를 검사하고 확인 (전환/animationFrame 기반 또는 자바 스크립트 (당신은 값을 볼 수있을 것이다 . 애니메이션 동안 style 속성 변경)
는 대답은 문서에서 실제로 :
https://angular.io/guide/animations
각도의 애니메이션 시스템은 Y를 할 수 있습니다 순수한 CSS 애니메이션에서 발견되는 것과 동일한 종류의 고유 한 성능을 가진 으로 실행되는 애니메이션을 제작할 수 있습니다. 도 애니메이션 로직을 나머지 애플리케이션 코드와 긴밀하게 통합하여 제어가 용이합니다.
또한 브라우저의 과부하 또는 애니메이션 연쇄를 방지하기 위해 애니메이션의 길이를 추적해야하는 필요성을 추상화합니다.
일반적으로 간단한 것이 있다면 CSS가 더 쉬울 것입니다. 그러나 앱에서 애니메이션을 일관되게 사용하는 경우 Angular Animation의 작은 측면에서 많은 힘을 얻습니다.
글쎄, Angular에 대해 많이 알지는 못하지만 CSS 애니메이션을 활용한다고 생각합니다. [사실 그들의 문서는] (https://angular.io/docs/ts/latest/guide/animations.html) : * "Angular의 애니메이션 시스템을 사용하면 동일한 종류의 기본 성능으로 ** 실행되는 애니메이션을 제작할 수 있습니다 * * 순수한 CSS 애니메이션에서 발견됩니다. "*. 그들은 또한 [웹 애니메이션] (https : //w3c.github.io/web-animations /) 여기서 [possible] (http://caniuse.com/#feat=web-animation). "angular 2 animation"에 대한 구글의 첫 번째 히트입니다. – GolezTrol
angular2 애니메이션은 컴파일 될 때 CSS 애니메이션을 생성합니다. Advantage를 사용하면 구성 요소 수준의 애니메이션을 쉽게 추가하고 제어 할 수 있습니다. –
빠른 응답을 주셔서 감사합니다. 그래서 기본적으로 앵귤러 2 애니메이션을 사용하는 것은 애니메이션을 더 제어하기 쉽게 만드는 방법 (animat() 및 style())과 같습니다 ( –