如何在angularjs中使用ng repeat动画

how to use animation with ng-repeat in angularjs

本文关键字：ng repeat 动画 angularjs      更新时间：2023-09-26

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

<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自己负责绑定视图和模型，但当视图在按下向下箭头图标时更新时，有什么方法可以放入动画吗？

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的文档。

检查此链接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

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

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

在您的控制器

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