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.

regular state

in 4 first levels of content, user has ability see 'path' (same breadcrumbs): overview opened

here things become interesting. when user clicks on 1 of levels, level expand , content of level inside it. opened content slide down: enter image description here

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

Popular posts from this blog

java - Run a .jar on Heroku -

java - Jtable duplicate Rows -

validation - How to pass paramaters like unix into windows batch file -