ng-animate

本文介绍了如何使用Angular的ng-animate指令实现基本动画效果,并通过ng-repeat控制元素的依次显示,同时提供了自定义动画及注意事项。文章还讨论了在使用ng-hide时防止瞬间隐藏的技巧。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

ng-animate

  • 基本指令动画
    这里写图片描述

执行顺序:
.class.ng-enter
.class.ng-enter-active
.class

使用ng-repeat可以控制依次显示:
.item.ng-enter-stagger {
transition-delay:0.5s;
transition-duration:0;
}

注意:使用ng-hide时需加上
.ng-hide-add,.ng-hide-remove{
display: block!important;
}防止瞬间隐藏


  • 自定义动画(基于class)
    在添加移除class时自定义动画.class-add .class-add-active .class

  • js定义动画
    一般不需要 除非需要加中止判断 回调等

demoApp.animation(‘.classname’,function(){
return {
‘handles’:function(element,className,donw){
//… your code here
//回调
return function(cancelled){
// alert(1);
}
}
}
})

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值