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…

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

    原文作者:叶子菌菌
    原文地址: https://segmentfault.com/a/1190000006810928
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞