$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：
<!DOCTYPE html>
<html> <head> <meta charset="utf-8" /> <title>$animate</title> <script src="http://cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.js"></script> <script src="../angular-1.4.7/angular.js"></script> <script src="../angular-1.4.7/angular-animate.js"></script> <style type="text/css" media="screen"> .fade { width: 100px; height: 100px; background-color: #ff9933; transition: 1s linear all; -webkit-transition: 1s linear all; } .fade.ng-enter { opacity: 0; } .fade.ng-enter.ng-enter-active { opacity: 1; } .fade.ng-leave { opacity: 1; } .fade.ng-leave.ng-leave-active { opacity: 0; } </style> </head> <body ng-app="Demo" ng-controller="testCtrl as ctrl"> <button my-dir>Fade in/out</button> <script type="text/javascript"> (function(){ var app = angular.module('Demo', ["ngAnimate"]) .directive("myDir", ["$animate", "$compile", myDir]) .controller('testCtrl',angular.noop); function myDir($animate, $compile) { function link(scope, element, attr) { var isAppended = false; var parent = element.parent(); var box; element.on('click', function () { isAppended = !isAppended; if (isAppended) { box = angular.element('<div class="fade"></div>'); scope.$apply($animate.enter(box, parent, element, function () { console.log("Done entering"); })); } else { scope.$apply($animate.leave(box, function () { console.log("Done leaving"); })); } }); } return { link: link }; } }()); </script> </body> </html>
实现animate动画代码2：
<!DOCTYPE html>
<html> <head> <meta charset="utf-8" /> <title>$animate</title> <script src="http://cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.js"></script> <script src="../angular-1.4.7/angular.js"></script> <script src="../angular-1.4.7/angular-animate.js"></script> <style type="text/css" media="screen"> .fade { transition: 1s linear all; -webkit-transition: 1s linear all; } .fade.ng-enter { opacity: 0; } .fade.ng-enter.ng-enter-active { opacity: 1; } .fade.ng-leave { opacity: 1; } .fade.ng-leave.ng-leave-active { opacity: 0; } </style> </head> <body ng-app="Demo" ng-controller="testCtrl as ctrl"> <div> <h1>Test List</h1> <ul> <li ng-repeat="item in ctrl.items" class="fade">{{item.value}} <a href="javascript:void(0);" ng-click="ctrl.removeItem($index)">close</a> </li> </ul> <br /> <input type="text" ng-model="ctrl.item.value" /> <button ng-click="ctrl.addItem()">Add Item</button> </div> <script type="text/javascript"> (function(){ var app = angular.module('Demo', ["ngAnimate"]) .controller('testCtrl',testCtrl); function testCtrl() { var vm = this; vm.items = [ { value: "AAAAA" }, { value: "BBBBB" }, { value: "CCCCC" }, { value: "DDDDD" }, { value: "EEEEE" } ]; vm.addItem = function () { vm.items.push(vm.item); vm.item = {}; }; vm.removeItem = function (index) { vm.items.splice(index, 1); }; } }()); </script> </body> </html>
实现animate动画代码3：
<!DOCTYPE html>
<html> <head> <meta charset="utf-8" /> <title>$animate</title> <script src="http://cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.js"></script> <script src="../angular-1.4.7/angular.js"></script> <script src="../angular-1.4.7/angular-animate.js"></script> </head> <body ng-app="Demo" ng-controller="testCtrl as ctrl"> <div> <h1>Test List</h1> <ul> <li ng-repeat="item in ctrl.items" class="fade">{{item.value}} <a href="javascript:void(0);" ng-click="ctrl.removeItem($index)">remove</a> </li> </ul> <br /> <input type="text" ng-model="ctrl.item.value" /> <button ng-click="ctrl.addItem()">Add item</button> <br /> <button ng-click="ctrl.bottomToTop()">我要上头条！！！</button> </div> <script type="text/javascript"> (function(){ var app = angular.module('Demo', ["ngAnimate"]) .animation('.fade', fade) .controller('testCtrl',testCtrl); function fade() { return { enter: function (element, done) { element.css('display', 'none'); $(element).fadeIn(1000, function () { done(); }); }, leave: function (element, done) { $(element).fadeOut(1000, function () { done(); }); }, move: function (element, done) { element.css('display', 'none'); $(element).slideDown(500, function () { done(); }); } } } function testCtrl() { var vm = this; vm.items = [ { value: "AAAAA" }, { value: "BBBBB" }, { value: "CCCCC" }, { value: "DDDDD" }, { value: "EEEEE" } ]; vm.addItem = function () { vm.items.push(vm.item); vm.item = {}; }; vm.removeItem = function (index) { vm.items.splice(index, 1); }; vm.bottomToTop = function () { vm.items.unshift(vm.items.pop()); }; } }()); </script> </body> </html>
关于ngAnimate动画，在google找了好多资料，主要是因为$animate的方法的使用。仅仅是css3的animate使用 和.animation()使用，这个不难，资料也多，以前也写过这些效果... 但是$animate的method使用没找到多少资料，然后在google找了好久，搜的是$animate关键字，好几次没找到。准备自己测试着 写，在controller写出来发现不能绑定到哪个DOM元素去使用，然后想到应该可能是在directive使用的，于是找指令中的$animate 使用资料，终于找到了一些用法。哈哈哈...这里就只用$animate.enter和$animate.leave做示范好了，其他的方法都是类似使 用...
2170
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
