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

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值