javascript - How to animate menu open/close in AngularJS -

i'm trying determine 'right' way solve problem.

i have menu sub-menu's. want animate (using jquery transitions) slide-up & slide-down effect when route changes.

i understand shouldn't manipulate dom controller bad-practice. should using directives listen route changes? services?

(example)

ul   li   li   li     ul       li       li 

you should take @ nganimate. there tutorial here

you able specify animations decleratively on elements should animated.

for example might specify "enter" , "leave" animations on element dynamically shown/hidden based on value in scope. animations can specified in css3 (recommended), or using jquery, mootools , other libraries.

<li ng-repeat="item in parent.items" ng-animate="'slide'" ng-show="parent.open">{{item.text}}</li> 

edit: api deprecated better api , and similar approach. read more here: http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html.