2014-11-25 3 views
18

저는 AngularJS를 사용하여 하이브리드 응용 프로그램을 제작하고 Material Design UI Principles을 기반으로하고 싶습니다. 나는 이것에 대해 Google 웹 사이트에서 읽었습니다. 그들은 재료가 겪어야하는 자연스러운 애니메이션을 많이 설명했습니다. 나는이 페이지에서 데모를 아주 좋아합니다. AngularJS Material Design에 애니메이션 지원이 없습니다. 달성 방법은 무엇입니까?

http://www.google.com/design/spec/material-design/introduction.html

그러나, 지원하는 오픈 소스 프로젝트 각도 재질 디자인이 애니메이션에 대한 지침이나 규정이 없습니다. 이 애니메이션을 어떻게 얻을 수 있는지 안내해주십시오.

CSS3 애니메이션을 사용하여 작업 할 계획입니다. 어떻게 사용해야하며 아키텍처가 무엇인지 제안하십시오. 이하지만, CSS 프레임 워크는 소재 디자인에 따라 내장 된 당신에게 어떤 도움이 될 것입니다 경우

+0

이렇게 @ rahat-khanna,이 유리한 해결책을 찾았습니까? 나는 같은 상황에 처해 있으며, 1) 앵귤러 소재와 같은 모의 소재 디자인 프레임 워크를 사용하거나, 2) 소재 디자인을 전혀 신경 쓸 필요가 없으며, 3) 원산지가되도록하십시오. 차라리 원주민이 아니기 때문에 나는 1을 향해 몸을 기울이고 있습니다. – zkent

+0

네가 원주민이되고 싶지 않다면 1이 될 것이라고 생각합니다. 또한 일부 답변에 언급 된 CSS 프레임 워크는 진화하여 이제 성숙되었습니다. –

+2

각도 재료 포털을 지금 확인했는데 이제는 모든 애니메이션이있는 것 같습니다 : https://material.angularjs.org/#/ –

답변

12

, 구체화을 (http://materializecss.com)는 재료 디자인을 기반으로 CSS 프레임 워크입니다 매우 사용하기 쉽습니다. 부트 스트랩과 유사하게 구성됩니다. 애니메이션은 자연스러운 느낌을주는 입방체가 있습니다.

+3

당신이 제공 한 링크가 멋지지만 멋진 것들을 만들었지 만 javascript 구성 요소는 jQuery를 기반으로합니다. AngularJS 프로젝트에 직접 사용할 수 없습니다. –

+0

구체화를위한 진입 장벽은 JS 구성 요소에 대한 angularjs 지시문이 없다는 것입니다. 물질적으로 불행한 것은 아름답습니다. – lostintranslation

+1

Materialize 프레임 워크에 대한 Angular 지시어를 작성하는 [프로젝트 (Angular Materialize)] (https://github.com/krescruz/angular-materialize)가 있습니다. – Huey

5

확실하지 http://material-ui.com 당신이 이미 결정하지 않은 경우

+1

Angular 역시 http : //material.angularjs와 같습니다. org와 같은 자연스러운 애니메이션을 만들고 싶습니다.com/design/spec/animation/authentic-motion.html # authentic-motion-mass-weight –

-4

이이

https://material.angularjs.org

"각 재료 프로젝트는 Angular.js의 재료 설계의 구현입니다 사용해보십시오이 프로젝트는 재사용 가능한 세트를 제공합니다 : 여기 개념의 증거입니다 , 잘 테스트되고 액세스 할 수있는 UI 구성 요소를 제공합니다.

Polymer 프로젝트의 Paper 요소 컬렉션과 마찬가지로 Angular Material은 su입니다. Angular.js, Material Design UX 및 기타 제품 팀에 의해 Google 내부에서 게시되었습니다. "

+18

나일지도 모르지만 Angular Material 프로젝트가 질문에 명시 적으로 언급되어 있지만 애니메이션에 대한 조항이 없다는 문제가 있습니다. – Huey

1

각도 재료 프로젝트는 애니메이션을 제공하지 않지만, 일반적으로 AngularJS와, 난 당신이 단순히이 패키지를 설치하고 삽입 할 수

ng-fx

매우 유용한 다음과 같은 패키지를 발견했습니다 의존성을 부여한 다음 애니메이션을 추가하는 것은 HTML에 특정 클래스를 추가하는 것만 큼 간단합니다.

아직 소재 디자인 지침을 읽고 어떤 애니메이션이 적합한 지, 어디에서 사용해야하는지 알아야합니다.

관련 문제