/*元素隐藏初始状态*/
.new-item.ng-hide-add{
opacity:1;
}
/*隐藏操作动画后的最终状态*/
.new-item.ng-hide-add-active{
opacity:0;
}
/*元素显示初始状态*/
.new-item.ng-hide-remove{
top: 10px;
}
/*显示操作动画后的最终状态*/
.new-item.ng-hide-remove-active{
top: 0px;
}
//ng-if、ng-view、ng-repeat、ng-include、ng-switch 指令
appH5.animation(".new-item",function(){
return {
leave:function(element,done){
//第一个参数是运动的元素,第二个参数是动画完成后的回调,必须调用的,不调用则指令功能不会执行
$(element).animate({width:0,height:0},1000,done);//借助jQuery
},
enter:function(element,done){
$(element).css({width:100,height:100});//借助jQuery
$(element).animate({width:100,height:100},1000,done)//借助jQuery
}
}
});
//ng-show ng-hide ng-class 指令
appH5.animation(".new-item",function(){
return {
addClass:function(element,sClass,done){
//第一个参数是运动的元素
//第二个参数是元素的样式-->一般用不上
//第三个参数是动画完成后的回调,必须调用的,不调用则指令功能不会执行
$(element).animate({width:0,height:0},1000,done)
},
removeClass:function(element,sClass,done){
$(element).css({width:100,height:100});
$(element).animate({width:100,height:100},1000,done)
}
}
});