如何在 angularjs 中使用带有 ng-repeat 的动画 [英] how to use animation with ng-repeat in angularjs

问题描述

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

{{项目名称}}<div class="icon-up-arrow" ng-click="moveUp($index);"></div><div class="icon-down-arrow" ng-click="moveDown($index);"></div>

moveUp 中的逻辑:-

$scope.moveUp= 函数(位置){var temp=list[position-1];列表[位置-1]=列表[位置]；列表[位置=临时]；};

上面的代码工作得很好，类似的是将项目向下移动的逻辑.但是我要解决的问题是如何放置动画?我知道 angular 会自行处理绑定视图和模型，但是有没有办法在视图在按下向下箭头图标时更新时放入动画?

解决方案

遵循 Marcel 的评论:在 AngularJS 1.2 中，您不需要使用 ng-animate 指令.相反:

1. 包括angular-animate[-min].js.
2. 让你的模块依赖于 ngAnimate.
3. 使用类似.ng-enter<的类在CSS中定义过渡 和 .ng-enter-active.
4. 像往常一样使用 ng-repeat.

HTML:

<!-- 设置控制器等，然后:--><ul><li ng-repeat="item in items">{{item}}</li>

JavaScript:

angular.module('foo', ['ngAnimate']);//控制器未显示

CSS:

li {不透明度:1；}li.ng-输入{-webkit-transition: 1s;过渡:1s；不透明度:0；}li.ng-enter-active {不透明度:1；}

(其他人的)Plunker 中的演示.

请参阅 $animate 的文档，了解通过各种 CSS 类.

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>

Logic in moveUp:-

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

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?

解决方案

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

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:

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.

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

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