angular实现简单的动态效果

简单的记录一下最近碰到的需求、对应的解决方法和学习情况。

1.对一个列表实现添加、删除、向上移动、向下移动的功能
2.在1的基础上，向上移动和向下移动的时候要有动态的展示效果
3.添加新的对象后，页面要显示出来，不能手动下滑滚动条

对于一个头脑并不聪明，入前端坑不久的人来说，我一开始是懵比的...angular要怎么做动态效果
好在查呀查呀总能找到解决的方法,如果还有其他方法希望大神不吝指点^.^。

首先,经过一番查找发现了angular-animate这个东西。官网上说，angular-animate为一些指令比如 ngRepeat、ngSwitch、ngView提供了一些动画钩子。钩子？..钩子？..

好吧，最后用我愚钝的大脑对它的理解是：如果引用了angular-animate库，并且使用了例如ng-repeat的指令，那么就可以在CSS里面使用以下这些类（即使从来没有定义过这些类），对元素的样式进行控制，这可能就是钩子的意思吧....

.xx // 元素本身的样式，比如长宽高啊、过渡的属性时间啦（transition: all 1s linear这个必须有，当然还可以用animation）

// 以下的类里面只
// 需要写需要过渡的属性和值
.xx.ng-enter // 元素出现时的初始状态
.xx.ng-enter.ng-enter-active  // 元素出现完毕以后的状态
.xx.ng-move  // 元素移动时的初始状态
.xx.ng-move.ng-move-active  // 元素移动完毕后的状态
.xx.ng-leave // 元素离开时的初始状态
.xx.ng-leave.ng-leave-active // 元素离开后的状态

放上一个简陋的小demo，表达一下：
http://plnkr.co/edit/37reLsWM...

除了这种方法，看文档还有其他玩儿法，我感觉就属这个方法最容易上手啦~~第一次写东西，不懂得地方还很多，如果有错误和不足还请路过的大神指出，我会虚心改正的

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!