javascript - Animation between content levels in AngularJS webapp -
i building functionality web app working on. app running on angularjs 1.0.7
the functionality following: user can navigate app quite conventionally, drilling down levels of content. 1 ng-view, several controllers more controllers , partials inside.
in 4 first levels of content, user has ability see 'path' (same breadcrumbs):
here things become interesting. when user clicks on 1 of levels, level expand , content of level inside it. opened content slide down:
as reference understand better, think of evernote's mobile app. there, use same mechanism switch between views on same level, every level can represented controller in 1 parent.
in case, however, 4 levels in hierarchical structure. on level 1 have option see several level 2's, on level 2 can go several different level 3's.
i trying see how make possible. need keep previous , new content visible during transition.
in end, implemented functionality clever use of dummy elements.
when navigation triggered:
- container element duplicated , replaced actual content
- actual container moved off screen
- animation started transition dummy element off screen , actual content area place
Comments
Post a Comment