如何在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>

上移逻辑：-

$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. 使用 classes like .ng-enter and .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;
}

Demo in (someone else's) Plunker.

请参阅docs for $animate，了解有关各种 CSS 类的进展的详细信息。

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

Answer 3

作为最后一个答案的补充，当顺序改变时，动画有 ng-move 类：

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

最后documentation here。

Answer 4

如果您因为减少插件数量而不想使用“ngAnimate”模块，您可以使用 ng-init 和自定义指令来归档简单的过渡效果。

<li ng-repeat="item in items" class="item" item-init>{{item.name}}</li>

.item{
    opacity:0;

   -webkit-transition: all linear 300ms;
   transition: all linear 300ms;
}
.item.visible{
    opacity:1;
}


myApp.directive('itemInit', function ($compile) {
    return function (scope, element, attrs) {
        scope.initItem(element);
    };
});

在你的控制器中

$scope.initItem = function(el){
    $timeout(function(){
        angular.element(el).addClass('visible');
    },0);
}