如何在AngularJS中打开/​​关闭菜单动画

Question

我正试图确定解决这个问题的"正确"方法.

我有一个带子菜单的菜单.我想在我的路线改变时动画(使用jQuery过渡)一个上滑和下滑效果.

我知道我不应该从我的控制器操作我的DOM,因为这是一个糟糕的做法.我应该使用听取路线变化的指令吗？服务？

(例)

ul
  li
  li
  li
    ul
      li
      li

Answer 1

你应该看看ngAnimate.有一个教程在这里

然后,您将能够在应该动画的元素上明确指定动画.

例如,您可以根据范围中的值在动态显示/隐藏的元素上指定"输入"和"离开"动画.然后可以在CSS3中指定动画(推荐),或使用jQuery,mootools和其他库.

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

编辑:这个API已被弃用,但它是一个更好的API和类似的方法.在这里阅读更多相关信息:http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html.