Javascript 如何在angularjs中使用带有ng repeat的动画

我有一个列表，我使用ng repeat进行迭代：用户可以使用向上箭头和向下箭头图标与列表项交互，单击它们，我只需更改“列表”中元素的顺序，这就是Angle建议更改模型的内容，更改会自动反映在视图中

<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>

上面的代码工作得很好，类似于向下移动项目的逻辑。但我想解决的问题是，我如何放置动画？我知道angular自己负责绑定视图和模型，但是当视图按上下箭头图标更新时，有没有办法放入动画？

检查此链接

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

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

您需要添加css过渡或动画

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

---

您可以在此处查看plnkr示例：

以下是Marcel的评论：在AngularJS 1.2中，您不需要使用

ng animate

指令。相反：

包括

角度动画[-min].js

使您的模块依赖于

ngAnimate

使用CSS定义您的转换

像平常一样使用

ng repeat

HTML:

CSS:

---

有关各种CSS类的进度的详细信息，请参见。

作为对上一个答案的补充，当顺序发生变化时，有一个用于动画的ng move类：

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

---

最后。

如果由于减少插件数量而不希望使用“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);
    };
});

---

我认为ng animate指令在AngularJS 1.2中被弃用。对于当前的ng repeat示例，查看nganimate.org上的大部分CSS链接仍然是一个很好的开始方式。将动画限制为您感兴趣的内容也是一个好主意-否则，如果您没有定义适当的CSS类，您可能会在几秒钟内看到元素。我发现了这个更有用的例子，它给出了在任何索引处插入元素时动画的概念。

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

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

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

<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);
}