$animate
$animate服务提供了基本的DOM操作功能如在DOM里插入、移除和移动元素,以及添加和删除类。这个服务是ngAnimate的核心服务,为CSS和Javascript提供了高档次的动画。
$animate在Angular核心都是有效的,无论如何,这个服务为了支持所有动画须包含ngAnimate模块。否则,$animate只能做简单的DOM操作。
方法:
enter(element,parent,after,[done]);
在DOM中,将一个元素插入到元素后面或作为第一个子元素插入父元素。一旦完成,done()将会被回调(如果done()存在)。
element:被插入到DOM的元素。
parent:将会被插入子元素的父元素。(如果下一个元素不存在)。
after:后面插入元素的兄弟元素。
done:当元素被插入DOM后执行的回调函数。
leave(element,[done]);
从DOM中移除元素。一旦完成,done()将会被调用(如果done()存在)。
element:将会被从DOM中移除的元素。
done:当元素被从DOM删除后执行的回调函数。
move(element,parent,after,[done]);
将提供的元素在DOM中移动位置,在父元素的内部或者兄弟元素之间。一旦完成,该done()将会被回调(如果done()存在)
element:在DOM中被移动的元素。
parent:将会被插入子元素的父元素。(如果下一个元素不存在)。
after:后面被放置元素的兄弟元素。
done:当元素在DOM中被移动后执行的回调函数。
addClass(element,className,[done]);
给提供的元素添加提供的CSS类名。一旦完成,done()将会被调用(如果done()存在)。
element:将会被添加class名称的元素。
className:将会被提供的css类。
done:当css类被添加到元素中后执行的回调函数。
removeClass(element,className,[done]);
给提供的元素移除提供的CSS类名。一旦完成,done()将会被调用(如果done()存在)。
element:将会被移除class名称的元素。
className:将会被移除的css类。
done:当css类被从元素中移除后执行的回调函数。
setClass(element,add,remove,[done]);
在元素中添加或者移除给定的css类名。一旦完成,done()将会被调用(如果done()存在)。
element:被设置CSS类的元素。
add:将会被添加到元素的CSS类。
remove:将会从元素上移除的CSS类。
done:当元素中的css类被设置后执行的回调函数。
实现animate动画代码1:
$animate
实现animate动画代码2:
$animate Test List
- { {item.value}} close
实现animate动画代码3:
$animate Test List
- { {item.value}} remove
更多效果,可在google搜"$animate",百度资料太少了额,质量也不行...