如何在angularjs中使用ng-repeat的动画

Question

我有一个列表,我使用ng-repeat迭代:用户可以使用向上箭头和向下箭头图标与列表项进行交互,点击它们我只需更改"列表中元素的顺序" "这就是角度建议改变模型,变化自动反映在视图中.

<div ng-repeat="item in list">
{{item.name}} 
<div class="icon-up-arrow" ng-click="moveUp($index);"></div> 
<div class="icon-down-arrow" ng-click="moveDown($index);"></div>
</div>

moveUp中的逻辑: -

$scope.moveUp= function(position){
 var temp=list[position-1];
 list[position-1]=list[position];
 list[position=temp];
};

上面的代码完全正常,类似的是将项目向下移动的逻辑.但我想解决的问题是如何放动画？我知道angular会自己处理绑定视图和模型,但是有没有办法放入动画,因为在按下向下箭头图标时视图会更新？

Answer 1

继Marcel的评论之后:在AngularJS 1.2中,您不需要使用该ng-animate指令.代替:

1. 包括angular-animate[-min].js.
2. 让你的模块依赖ngAnimate.
3. 使用和等类来.ng-enter.ng-enter-active定义CSS中的过渡.
4. 使用ng-repeat像通常那样.

HTML:

<div ng-app="foo">
    <!-- Set up controllers etc, and then: -->
    <ul>
        <li ng-repeat="item in items">{{item}}</li>
    </ul>

JavaScript的:

angular.module('foo', ['ngAnimate']);
// controllers not shown

CSS:

li {
    opacity: 1;
}
li.ng-enter {
    -webkit-transition: 1s;
    transition: 1s;
    opacity: 0;
}
li.ng-enter-active {
    opacity: 1;
}

演示(别人的)Plunker.

有关通过各种CSS类进展的详细信息,请参阅$ animate的文档.

Answer 2

查看此链接http://www.nganimate.org/

1. 您需要将ng-animate属性声明为具有另一个更改DOM的指令的元素

   div ng-repeat="item in itens" ng-animate="{enter: 'animate-enter', leave: 'animate-leave'}"
   

2. 您需要添加css过渡或动画.

   .animate-enter {
      -webkit-transition: 1s linear all; /* Chrome */
      transition: 1s linear all;
      opacity: 0;
   }
   .animate-enter.animate-enter-active {
      opacity: 1;
   }
   

您可以在此处查看plnkr示例:http://plnkr.co/edit/VfWsyg9d7xROoiW9HHRM