如何使用与angularjs NG重复动画 [英] how to use animation with ng-repeat in angularjs

问题描述

我有我用NG-重复迭代列表：并且用户可以通过使用向上和向下箭头图标，并在其上​​的点击，我只是更改元素的顺序与thte列表中的项目进行互动在名单，这是什么角度提出修改模型和变化的观点自动反映。

I have a list which I iterate over by using ng-repeat: and the user can interact with thte list items by using up-arrow and down-arrow icons and on click of them i simply change the order of the element in the "list" this is what angular suggests change the model and the changes automatically reflect in the view.

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

Logic in moveUp:-

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

以上code工作完全罚款和类似的是转移项目下的逻辑。但是，我想解决的问题是如何将动画？我知道角需要结合视图和模型自身的保健，而且有没有什么办法把动画作为视图更新pressing了一个向下的箭头图标？

the above code works completely fine and similar is the logic for shifting the item down. But the problem that i want to resolve is how do i put animation? I know angular takes care of binding view and model on its own but is there any way to put in animation as the view is updated on pressing up an down arrow icons?

推荐答案

从马塞尔的评论继：在AngularJS 1.2不需要使用 NG-动画指示。相反：

Following on from Marcel's comment: in AngularJS 1.2 you don't need to use the ng-animate directive. Instead:

1. 包含角动画[-min] .js文件。


2. 请你的模块依赖于 ngAnimate 。


3. 使用类似类定义的转换在CSS > .ng进入和 .ng进入活性 。


4. 使用 NG-重复，你通常会。

1. Includeangular-animate[-min].js.
2. Make your module depend on ngAnimate.
3. Define your transitions in CSS using classes like .ng-enter and .ng-enter-active.
4. Use ng-repeat as you normally would.

HTML

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

JavaScript的：

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类的进展。

See the docs for $animate for details on the progression through the various CSS classes.

这篇关于如何使用与angularjs NG重复动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！