Angular 学习系列 - - $animate 让交互动起来
$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() {this.items = [
{ value: "AAAAA" },
{ value: "BBBBB" },
{ value: "CCCCC" },
{ value: "DDDDD" },
{ value: "EEEEE" }
];this.addItem = function () {this.items.push(this.item);this.item = {};
};this.removeItem = function (index) {this.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() {this.items = [
{ value: "AAAAA" },
{ value: "BBBBB" },
{ value: "CCCCC" },
{ value: "DDDDD" },
{ value: "EEEEE" }
];this.addItem = function () {this.items.push(this.item);this.item = {};
};this.removeItem = function (index) {this.items.splice(index, 1);
};this.bottomToTop = function () {this.items.unshift(this.items.pop());
};
}
}());</script></body></html>
更多效果，可在google搜"$animate"，百度资料太少了额，质量也不行...