2013-08-23 2 views
0

Google에서 진행중인 웹 앱용 기능을 구축 중입니다. 앱이 AngularJS 1.0.7에서 실행 중임AngularJS 웹 앱의 콘텐츠 수준 간 애니메이션

기능은 다음과 같습니다. 사용자는 콘텐츠 수준에 따라 상당히 일반적인 방식으로 앱을 탐색 할 수 있습니다. 하나의보기, 내부에 더 많은 컨트롤러와 부분이있는 여러 컨트롤러. 일 흥미가 어디에 여기 Overview opened

은 : 콘텐츠 (4 개) 제 수준에서는

regular state

는 사용자 (부스러기와 같은)가 '패스'를 참조 할 수있는 능력을 갖는다. 사용자가 레벨 중 하나를 클릭하면 해당 레벨이 확장되고 해당 레벨의 컨텐츠가 그 레벨에 포함됩니다. 원래 열었던 콘텐츠는 아래로 내려갑니다. enter image description here

Evernote의 모바일 앱을 더 잘 이해할 수 있도록 참조하십시오. 동일한 메커니즘을 사용하여 같은 수준에있는보기간에 전환 할 수 있으므로 모든 수준을 한 부모의 컨트롤러로 나타낼 수 있습니다.

그러나 필자의 경우 4 레벨은 모두 계층 적 구조입니다. 레벨 1에는 몇 가지 레벨 2를 볼 수있는 옵션이 있습니다. 레벨 2에는 몇 가지 다른 레벨 3에 갈 수 있습니다.

나는 그것을 가능하게 만드는 방법을 찾고있다. 전환하는 동안 이전 및 새 콘텐츠를 계속 표시해야합니다.

답변

0

마지막으로 더미 요소를 영리하게 사용하여 해당 기능을 구현했습니다. 탐색 트리거 된

:

  • 컨테이너 요소를 복제하고, 실제의 콘텐츠를 대체
  • 실제 용기 화면 벗어
  • 애니메이션 화면과 실제 콘텐츠 영역 오프 더미 소자를 전환하기 시작했다 그 자리에